Question

我不太确定该怎么称呼，因此搜索范围受到限制。很抱歉，如果重复。

所以我想在mouseenter上使用一个函数，但是div不同，子div也不同。我想创建一种效果，当有人将鼠标悬停在某列上时，文本会出现。但是只有该特定div中的文本。但是功能是相同的。所以我想知道是否有解决方案，除了复制粘贴相同功能并更改名称之外。到目前为止，我认为它看起来像这样：

jQuery(firstColumn).add(secondColumn).on('mouseenter', function() {
    if(that.is(firstColumn){
        jQuery(firstColumnText).addClass('show');
    }else if(that.is(secondColumn)){
        jQuery(secondColumnText).addClass('show');
    }
});
jQuery(firstColumn).add(secondColumn).on('mouseleave', function() {
    if(that.is(firstColumn){
        jQuery(firstColumnText).removeClass('show');
    }else if(that.is(secondColumn)){
        jQuery(secondColumnText).removeClass('show');
    }
});

或者，如果有什么更整洁的东西，我想学习。

Answer 1

JQuery提供了mouseover和mouseout侦听器，您可以将它们绑定到功能上以添加类或更改CSS：

$(".hover-to-show-text").each((index, elt) => {
  $(elt).mouseover(() => {
    $(elt).find(".hidden-text").css("display", "block");
  });
  $(elt).mouseout(() => {
    $(elt).find(".hidden-text").css("display", "none");
  });
});

.hover-to-show-text {
  padding: .3em;
  border: 1px solid grey;
}

.hidden-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover-to-show-text">
  <p>Hover to show text</p>
  <p class="hidden-text">Some text</p>
</div>
<div class="hover-to-show-text">
  <p>Hover to show text</p>
  <p class="hidden-text">Some text</p>
</div>
<div class="hover-to-show-text">
  <p>Hover to show text</p>
  <p class="hidden-text">Some text</p>
</div>

jQuery Mouseenter上具有不同类的相同功能

1 个答案: