我知道这个问题以前被问过很多次,但我没有得到预期的答案....我试图将鼠标悬停在 .h4size 上并影响 .fsize 我在 css 下面使用它不工作...
HTML
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a href="product.php" >
<i class="fa fa-qrcode fa-3x fsize"></i>
<h4 class="h4size">Saloon Product</h4>
</a>
</div>
CSS
.h4size:hover .fsize {
color: #c90000;
text-shadow: 4px 6px 3px #202020;
}
我也试过
.div-square .fsize .h4size:hover + .div-square .fsize {
color: #c90000;
text-shadow: 4px 6px 3px #202020;
}
它也不起作用
最佳答案
您可以反转 html 代码,但让它显示您最初使用 display: flex;
的方式和 flex-direction: column-reverse;
然后使用 adjacent sibling selector ' +
' 以 <i>
为目标来自 <h4>
的标签标签。
a { text-decoration: none; color: black; }
.reorder {
display: flex;
flex-direction: column-reverse;
}
h4:hover + i {
color: red;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="div-square">
<a class="reorder" href="product.php">
<h4 class="h4size">Saloon Product</h4>
<i class="fa fa-qrcode fa-3x fsize"></i>
</a>
</div>
</div>
另一种选择是使用 flexbox 和 order
这是原来的答案..
https://stackoverflow.com/a/39157544/3377049
fiddle
https://jsfiddle.net/Hastig/9nvgvnxx/
更多关于 flexbox 的信息请访问 CSS Tricks
关于CSS:+选择器在悬停在 child 身上时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43930863/