Question

所以大家好，我想将这个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 -->

的style.css

.why-item:hover .why-box-head i {
    -webkit-transform:scale(1.4);
    transform:scale(1.4);
}

.why-item:hover .why-box-head h4 {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

.why-item:hover p {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

.why-box-head i {
  color: #607D8B;
  font-size: 70px;
  display: inline-block;
  line-height: 40px;
  margin-bottom: 30px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.why-box-head h4 {
  font-size: 18px;
    line-height: 1.1;
    font-weight: bold;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.why-item p {
    line-height: 22px;
    color: #797979;
    font-size: 14px;
    margin-bottom: 20px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

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

那么，当父div（why-item div）徘徊时，你如何影响2个孙子和一个孩子呢？我想要效果：
作为为什么项目（孙子）的孩子为什么是盒子头的孩子的标签i
作为为什么项目（孙子）的孩子为什么是盒子头的孩子的标签h3
标签p是为什么项目（孩子）的孩子

我尝试使用这个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"});
});

Answer 1

使用$(this).find('.why-box-head h4')查找当前悬停元素中的相对孙子。您也可以将p添加到选择器。

$(".why-item").hover(
  function() {
    $(this)
      .find(".why-box-head h4, p")
      .css({ "-webkit-transform": "scale(1.1)", transform: "scale(1.1)" })
      .end()
      .find('.why-box-head i')
      .css({'-webkit-transform':'scale(1.4)',
    'transform':'scale(1.4)'});
  },
  function() {
    $(this)
      .find(".why-box-head h4, p")
      .css({ "-webkit-transform": "scale(1)", transform: "scale(1)" })
      .end()
      .find('.why-box-head i')
      .css({'-webkit-transform':'scale(1)',
    'transform':'scale(1)'});
  }
);

.why-box-head i {
  color: #607D8B;
  font-size: 70px;
  display: inline-block;
  line-height: 40px;
  margin-bottom: 30px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.why-box-head h4 {
  font-size: 18px;
    line-height: 1.1;
    font-weight: bold;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.why-item p {
    line-height: 22px;
    color: #797979;
    font-size: 14px;
    margin-bottom: 20px;
  -webkit-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<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，它影响了它的2个孙子和1个孩子

1 个答案: