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＆＃39; +＆＃39;从<i>代码中定位<h4>代码。

＆＃13;

a { text-decoration: none; color: black; }
.reorder {
  display: flex;
  flex-direction: column-reverse;
}
h4:hover + i {
  color: red;
}

＆＃13;

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

＆＃13;

另一种选择是使用flexbox和order

这是原来的答案..

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

<强>拨弄

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

有关CSS Tricks

的flexbox的更多信息

Answer 2

你好这是解决方案：

https://jsfiddle.net/uvzqsggo/

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

我已经添加了示例文本Test但是将其删除（仅作为示例）

<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

＆＃13;

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

＆＃13;

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

＆＃13;

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

CSS：+选择器在将鼠标悬停时无效

4 个答案: