I am trying to create a linked container that has an image, header, and text. The entire container should be clickable, but on hover, I only want the header to underline, not the text.
我正在尝试创建一个具有图像、标题和文本的链接容器。整个容器应该是可点击的,但在悬停时,我只希望标题下划线,而不是文本。
For example:
例如:
a {
text-decoration: none;
cursor: pointer
}
a:hover,a:active,a:focus {
text-decoration: underline
}
<div class="links">
<a href="https://www.google.com" target="_blank" class="spalink" title="">
<div class="link-container">
<div class="link-image" style="background-image: url(IMAGE);"></div>
</div>
<div class="link-content">
<h3 class="link-title">Vacations</h3>
<div class="link-description">Let's take some vacations!</div>
</div>
</a>
</div>
No matter what I try, I can't seem to override the <a>
on hover, which is underlining everything:
无论我怎么尝试,我似乎都无法覆盖悬停时的,它在所有东西下面都加了下划线:
I want the <a>
to behave like this for all elements except the "link-description" as seen above.
Any ideas?
我希望对于除上面所示的“link-Description”之外的所有元素都是这样的。有什么主意吗?
:not ( ).....;
更多回答
优秀答案推荐
Is a CSS selector like a:hover .link-title
what you are looking for?
您正在寻找的是像:hover.link-title这样的css选择器吗?
a {
text-decoration: none;
cursor: pointer
}
a:hover .link-title,
a:active .link-title,
a:focus .link-title {
text-decoration: underline
}
<div class="links">
<a href="https://www.google.com" target="_blank" class="spalink" title="">
<div class="link-container">
<div class="link-image" style="background-image: url(IMAGE);"></div>
</div>
<div class="link-content">
<h3 class="link-title">Vacations</h3>
<div class="link-description">Let's take some vacations!</div>
</div>
</a>
</div>
更多回答
我是一名优秀的程序员,十分优秀!