Jquery将一个父div悬停在其子div和子div上

伙计们，我想把这个css悬停代码转换成jquery代码

这是悬停css版本：
index.html

<div class="container-fluid">
      <div class="row why-us-box">
        <div class="why-item col-xs-12 col-md-4 col-sm-4 text-center">
          <div class="why-box-head">
            <i class="fa fa-group"></i>
            <h4>
              <b>Reason 1</b>
            </h4>
          </div>
          <p class="text-center">
            Detail Reason 1
          </p>
        </div>

        <div class="why-item col-xs-12 col-md-4 col-sm-4 text-center">
          <div class="why-box-head">
            <i class="fa fa-trophy"></i>
            <h4>
              <b>Reason 2</b>
            </h4>
          </div>
          <p class="text-center">
            Detail Reason 2
          </p>
        </div>

        <div class="why-item col-xs-12 col-md-4 col-sm-4 text-center">
          <div class="why-box-head">
            <i class="fa fa-graduation-cap"></i>
            <h4>
              <b>Reason 3</b>
            </h4>
          </div>
          <p class="text-center">
            Detail Reason 3
          </p>
        </div>
      </div><!-- End of why-us-box -->
    </div> <!-- End of container-fluid -->

它的工作非常好，但我想尝试jquery方式。

那么，当父div（为什么项目div）悬停时，您如何影响2个孙子和一个孩子呢？ 我想了解以下方面的影响：
标签i，它是why盒盖的子项，它是why项的子项（孙辈）
标签h3，它是why盒盖的子项，它是why项的子项（孙辈）
标记p，它是why项的子项（子项）

我尝试这个jquery只是为了实现标记I，但它仍然让我感到困惑，更不用说同时实现3个标记了

$(".why-item").hover(function(){
    $("why-box-head i").css({"-webkit-transform":"scale(1.4)","transform":"scale(1.4)"});
    }, function(){
    $("why-box-head i").css({"-webkit-transition":"all 0.7s ease","transition":"all 0.7s ease"});
});

使用

$（this）.find（'.why box head h4'）

在当前悬停的元素中查找相对的孙子。您也可以将

p

添加到选择器中

$（“.why item”）。悬停(
函数（）{
$（本）
.find（“.为什么是h4，p箱头”）
.css（{“-webkit transform”：“scale（1.1）”，transform:“scale（1.1）”}）
(完)
.find（'.why box head i'）
.css（{'-webkit transform'：'scale（1.4）'，
‘转换’：‘比例（1.4）’}；
},
函数（）{
$（本）
.find（“.为什么是h4，p箱头”）
.css（{“-webkit transform”：“scale（1）”，transform:“scale（1）”}）
(完)
.find（'.why box head i'）
.css（{'-webkit transform'：'scale（1）'，
‘转换’：‘比例（1）}）；
}
);
。为什么要使用箱头i{
颜色：#607D8B；
字体大小：70px；
显示：内联块；
线高：40px；
边缘底部：30px；
-webkit过渡：所有0.7秒轻松；
过渡：所有0.7秒缓解；
}
.为什么是盒头h4{
字号：18px；
线高：1.1；
字体大小：粗体；
-webkit过渡：所有0.7秒轻松；
过渡：所有0.7秒缓解；
}
.为什么选择p项{
线高：22px；
颜色：#7979；
字体大小：14px；
边缘底部：20px；
-webkit过渡：所有0.7秒轻松；
过渡：所有0.7秒缓解；
}

理由1

详细理由1

理由2

详细理由2

理由3

详细理由3

对不起，为什么jquery会这样做？CSS将不那么密集。如果需要“在悬停状态下执行某些操作”，只需将其添加到jquery中即可。不要强调使用jquery为您制作动画。使用jquery时，您应该做的唯一一件事是更改类，以便CSS可以为您设置动画这是一项学校作业。您的jquery脚本只影响标记i，如果我想在悬停父div时影响其他两个标记，该怎么办？我应该编写另一个悬停函数还是有其他方法？
。查找（“.why box head h4，p”）
以h4和p为目标。根据你想要的目标，你可以在那里放置多个元素。那么标签i呢，它是孙子？是这样的=>.find（“.why-box-head h4，.why-box-head i，p”）？@phapha是的，这个很有效。事实上，前面的标签也很好用，只是我把和放在头部标签上，而不是底部靠近封闭体的标签上，这太傻了。
$(".why-item").hover(function(){
    $("why-box-head i").css({"-webkit-transform":"scale(1.4)","transform":"scale(1.4)"});
    }, function(){
    $("why-box-head i").css({"-webkit-transition":"all 0.7s ease","transition":"all 0.7s ease"});
});