Home / Questions / 115836
Accepted
gmarsi
Asked: 2020-11-09 13:18:36 +0800 CST 2020-11-09 13:18:36 +0800 CST

将样式添加到悬停到父元素的元素

  • 772

我有一个<div>里面有<p>一个文本。使用 CSS将鼠标悬停在其上时，如何<div>应用下划线效果？text-decoration: underline<p>

这是我的 HTML 代码：

<div id="addNewColumn"  style="width: 200px; height: 300px; border: 1px dashed green; border-radius: 5px; border-width: 2px; margin: 20px; cursor: pointer">    
    <p id="newColLink"   style="text-align: center;">   Underline on hover </p>
</div>
css

4 Answers

  1. 如果您想要的是在mouse通过div应用样式text-decoration: underline;时，请尝试以下操作codigo。

    #addNewColumn {
    width: 200px;
    height: 300px;
    border: 1px solid green;
    border-radius: 5px;
    border-width: 2px;
    margin: 20px;
    cursor: pointer;
}
#addNewColumn p {
    text-align: center;
}
#addNewColumn:hover {
    text-decoration: underline;
}
    <div id="addNewColumn">    
        <p id="newColLink">   Underline on hover </p>
    </div>

    • 2

  2. 适用于CSS父母hover，#addNewColumn:hover但规则CSS将适用于孩子(p)

    #addNewColumn{
width: 200px; 
height: 300px; 
border: 1px dashed green;
}
#newColLink{
text-align: center;
}
#addNewColumn:hover p{
	text-decoration: underline;
}
    <div id="addNewColumn" >    
    <p id="newColLink"> Underline on hover </p>
</div>

    • 2
  3. Best Answer

    要通过将鼠标悬停在元素上应用您想要的但将样式分配给另一个元素，您可以执行以下操作：

    #addNewColumn:hover p{
  text-decoration: underline
}
    <div id="addNewColumn"  style="width: 200px; height: 300px; border: 1px dashed green; border-radius: 5px; border-width: 2px; margin: 20px; cursor: pointer">    
    <p id="newColLink"   style="text-align: center;">   Underline on hover </p>
</div>

    使用选择器#addNewColumn:hover p，您是说当将鼠标悬停在选择器上时，选择器<p>内的所有元素都会应用某种样式。div#addNewColumn

    注意：内联样式（当您使用它们时）是不好的代码实践，您应该有一个外部样式表并通过标签将其链接到 HTML<link>

    • 2

  4. 你让你的身体保持原样：

    <div id="addNewColumn"  style="width: 200px; height: 300px; border: 1px dashed green; border-radius: 5px; border-width: 2px; margin: 20px; cursor: pointer">    
    <p id="newColLink"   style="text-align: center;">  
        Underline on hover
    </p>
</div>

    在您将链接到 html 的 css 文件中，添加以下内容：

        #addNewColumn:hover p {
        text-decoration: underline;
    }
    • 2