Question

当我将鼠标移到一个标志上时，所有其他标志都切换为悬停。但是我想要的只是将当前元素切换到悬停。

<div class="lang-list">
  <a href=" index.php" class="nodisplayflag" class="linkhover">
    <img class="hover1" src="flag1.png">
    <img class="hover2" src="flag1_hover.png" style="display:none">
  </a>

  <a href="index2.php" class="linkhover">
    <img class="hover1" src="flag2.png">
    <img class="hover2" src="flag2_hover.png" style="display:none">
  </a>

  <a href="index3.php" class="linkhover">
    <img class="hover1" src="flag3.png">
    <img class="hover2" src="flag3_hover.png"style="display:none">
  </a>
</div>

我的Js函数在这里

$(".linkhover").hover(
  function(){
    $(".hover1").hide();
    $(".hover2").show();
  },    

  function(){
    $(".hover1").show();
    $(".hover2").hide();
  }
);

是否仅将当前元素悬停而不使用专用ID是一种明智的方法？

Answer 1

使用$(this)将选择器限制为仅在当前.linkhover元素中找到的选择器（未经测试）。

$(".linkhover").hover(
    function(){
        $(this).find(".hover1").hide();
        $(this).find(".hover2").show();
    }, function(){
        $(this).find(".hover1").show();
        $(this).find(".hover2").hide();
    }
);

Answer 2

问题在于您正在选择所有xe:djTextarea和.hover1。

尝试此更改：

.hover2

通过这种方式，您可以显示/隐藏$(".linkhover").hover( function () { $(this).find(".hover1").hide(); $(this).find(".hover2").show(); }, function () { $(this).find(".hover1").show(); $(this).find(".hover2").hide(); } );中被悬停的元素。

jQuery悬停没有ID

2 个答案: