主页 / 问题 / 1204635
Accepted
Stop-TussiN
Asked:2021-11-15 00:14:13 +0000 UTC2021-11-15 00:14:13 +0000 UTC

悬停在块上时如何仅在标题下划线？

  • 772

您需要确保当您将鼠标悬停在块上时，只有标题带有下划线，而文本保持不带下划线。

我是这样做的，但它最终强调了所有单词：

<style>
.css_link {
text-decoration:none;
display:block;
width:300px;
height:500px;
background:#ccc;
}
.css_zagolovok {
margin-bottom:30px;
}
.css_link:hover{
text-decoration:underline;
display:block;
}
.css_text:hover {
text-decoration:none !important;
}
</style>
<a class="css_link" href="">
    <div class="css_zagolovok">Заголовок</div>
    <div class="css_text">Текст текст текст текст текст текст текст текст текст </div>
</a>

css

1 个回答

  1. Best Answer

    当您将鼠标悬停在其父级上时，只需为其添加一个样式 -

    .css_link:hover .css_zagolovok {
    text-decoration:underline;
}


    <style>
.css_link {
text-decoration:none;
display:block;
width:300px;
height:500px;
background:#ccc;
}
.css_zagolovok {
margin-bottom:30px;
}
.css_link:hover{
text-decoration:none;
display:block;
}

.css_link:hover .css_zagolovok {
    text-decoration:underline;
}

</style>
<a class="css_link" href="">
    <div class="css_zagolovok">Заголовок</div>
    <div class="css_text">Текст текст текст текст текст текст текст текст текст </div>
</a>

    • 1

相关问题