CSS:+选择器在悬停在 child 身上时不起作用

Question

我知道这个问题以前被问过很多次，但我没有得到预期的答案....我试图将鼠标悬停在 .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;
}

它也不起作用

Answer 1

您可以反转 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