Question

悬停时需要激活三个元素。这些元素也用在不同的div中，并共享相同的元素和类。我正在使用JavaScript来实现这一目标。

问题是当鼠标悬停在div 1上时，它还会激活div 2和3.可能是因为它们共享相同的元素。

如何在悬停时单独激活它们？

$(function() {
  $(".link")
    .hover(

      function() {
        $(".link").css('color', 'red', 'text-decoration', 'none');
        $(".box").css('border-bottom', '4px solid #183c94');
        $("span").css('opacity', '1');
      },

      function() {
        $("link").css('color', '#000000');
        $(".box").css('border-bottom', '4px solid #cfcfcf');
        $("span").css('opacity', '0');
      });
  
});

.box {
  width: 300px;
  height: 30px;
  background: #f1f1f1;
  text-align: center;
}
span {
  height: 10px widtth: 10px;
  background: #c3c3c3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
  <h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
  <h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>

查看JSFiddle。

Answer 1

您需要使用this来＆＃34;找到＆＃34;要素：

$(function () {
    $(".link")
    .hover(
        function () {
            $(this).css('color', 'red', 'text-decoration', 'none');
            $(this).closest(".box").css('border-bottom', '4px solid #183c94');
            $(this).next("span").css('opacity', '1');
        },

        function () {
            $(this).css('color', '#000000');
            $(this).closest(".box").css('border-bottom', '4px solid #cfcfcf');
            $(this).next("span").css('opacity', '0');
        });
});

DEMO

同样在CSS中：

span {
  height: 10px widtth: 10px;
  background: #c3c3c3;
}

应该是：

span {
    height:10px; width:10px;
    background: #c3c3c3;
}

在悬停时单独激活元素

1 个答案: