CSS:悬停在链接上，但不显示图像
CSS:悬停在链接上，但不显示图像
提问于 2017-05-03 17:08:26
在实践中，当我悬停这些链接时，当第一个悬停选择器执行得很好时，所有链接都会变成绿色。但是，对于最后一个链接"cde"，我调用另一个悬停选择器来显示图像，它不工作。
我试过的是：
- 设置原始不透明度=0 -- 悬停不透明度=1->不工作
- 设置原始显示器=无-- 悬停显示=块->不工作
问题:有什么方法可以在文本变绿的情况下显示图像吗？
提前谢谢你的帮助。非常感谢！
.work-abcde a:hover{
color: #61c261;
}
.cde-pic{
position: relative;
width: -100px;
top: -100px;
float: right;
visibility: hidden;
}
.cde:hover .cde-pic {
position: relative;
left: -20px;
visibility: visible;
}<div class="work-abcde">
<ul>
<li><h3>abc bcd cde</h3></li>
<li><h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4></li>
<li><h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4></li>
<li><h4><a class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4> </li>
<div class="cde-pic"><img src="./Resources/cde.png" ></div>
</ul>
</div>
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-05-03 17:16:31
问题是，css选择器不能以纯CSS中的父级为目标，您可以针对兄弟或子级，但不能针对父(纯CSS)。
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
CSS3中有四个不同的组合子：
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)有关子/兄弟姐妹选择器的更多信息，您可以在这里阅读更多(2分钟的阅读) combinators.asp
解决方案1：
<li>和<div>是兄弟姐妹。所以，使用li悬浮而不是类cde，那么您就可以针对cde-pic类：
li:hover ~ .cde-pic {
position: relative;
left: -20px;
visibility: visible;
}
.work-abcde a:hover {
color: #61c261;
}
.cde-pic {
position: relative;
width: -100px;
top: -100px;
float: right;
visibility: hidden;
}
li:hover + .cde-pic {
position: relative;
left: -20px;
visibility: visible;
}<div class="work-abcde">
<ul>
<li>
<h3>abc bcd cde</h3>
</li>
<li>
<h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
</li>
<li>
<h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
</li>
<li>
<h4><a class="cde" href="www.cde.com" rel="nofollow"> cde </a> </h4>
</li>
<div class="cde-pic">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</ul>
</div>
解决方案2：
将<div>移动到<li>中，使它们成为兄弟(cde和cde-pic)。
.work-abcde a:hover {
color: #61c261;
}
.cde-pic {
position: relative;
width: -100px;
top: -100px;
float: right;
visibility: hidden;
}
.cde:hover + .cde-pic {
position: relative;
left: -20px;
visibility: visible;
}<div class="work-abcde">
<ul>
<li>
<h3>abc bcd cde</h3>
</li>
<li>
<h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4>
</li>
<li>
<h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4>
</li>
<li>
<h4>
<a class="cde" href="www.cde.com" rel="nofollow"> cde </a>
<div class="cde-pic">
<img src="https://dummyimage.com/200x200/000/fff">
</div>
</h4>
</li>
</ul>
</div>
Stack Overflow用户
发布于 2017-05-03 17:19:56
你用的这个选择器..。
.cde:hover .cde-pic { ... }...cannot工作，因为.cde-pic不是.cde的子元素。
Stack Overflow用户
发布于 2017-05-03 17:23:13
尝试以下几点：
.work-abcde a:hover{
color: #61c261;
}
.cde-pic{
position: relative;
top: -100px;
float: right;
display:none;
}
.cde:hover:after {
content: url("//images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png"); /* no need for qoutes */
position: relative;
display:block;
left: -20px;
}<div class="work-abcde">
<ul>
<li><h3>abc bcd cde</h3></li>
<li><h4><a class="abc" href="www.abc.com" rel="nofollow"> abc</a> </h4></li>
<li><h4><a class="bcd" href="www.bcd.com" rel="nofollow"> bcd </a> </h4></li>
<li><h4><a class="cde" href="www.cde.com" rel="nofollow"> cde</a> </h4> </li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43766176
复制相关文章
相似问题
腾讯云开发者
