CSS: + 将鼠标悬停在孩子身上时选择器不起作用

Question

我知道这个问题之前被问过很多次，但我没有得到我预期的答案......我正在尝试将鼠标悬停在 .h4size 上并影响 .我在 CSS 下面使用的 fsize 它不起作用...

.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;

然后使用相邻的同级选择器 ' + ' 从<h4>标签定位<i>标签。

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>

另一种选择是使用弹性框和order

这是原始答案..

https://stackoverflow.com/a/39157544/3377049

小提琴

https://jsfiddle.net/Hastig/9nvgvnxx/

更多关于 flexbox at CSS Tricks

Answer 2

你好这是解决方案：

https://jsfiddle.net/uvzqsggo/

将您的 HTML 代码替换为以下内容：只是：<i class="fa fa-qrcode fa-3x fsize">Test</i>这一行：

我添加了示例文本测试但将其删除(这只是示例(

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                          <div class="div-square">
                               <a href="product.php" >
                          <h4 class="h4size">Saloon Product</h4>
                           <i class="fa fa-qrcode fa-3x fsize">Test</i>
                          </a>
    </div>

Answer 3

你的代码应该是这样的：

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
  <div class="div-square">
     <a href="product.php"> 
        <h4 class="h4size"> <i class="fa fa-qrcode fa-3x fsize"></i> Saloon Product</h4>
     </a>
    </div>
</div>

Answer 4

 .fsize>.h4size:hover {
   color: #c90000;
    text-shadow: 4px 6px 3px #202020;
}

 <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">
                          <h4 class="h4size">Saloon Product</h4></i>
                          </a>
    </div>

这是您问题的最简单解决方案