jQuery悬停动画只在其他类似元素中的一个元素上

jQuery hover animation on only one element out of similar others

本文关键字：元素 一个 jQuery 动画 其他 悬停      更新时间：2023-09-26

我是Js和jQuery的新手，当我将鼠标悬停在另一个div上时，我成功地在div上设置了宽度更改动画。但是，当我放置3组类似的div时，悬停在其中一组上，就会触发对所有其他div的操作。我试着放一些"this"answers"next（）"，但它完全停止了工作。你能启发我一下吗。谢谢

这是代码。

https://jsfiddle.net/HiD3f/LmbaL1qo/2/

<html>
   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>
   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>
   <div class="mapHideBtn collapsed"></div>
   <div class="searchBlock hidden"></div>
</html>
<style>
  .searchBlock {
     display : inline-block;
     height: 50px;
     background : red;  
  }
  .hidden {
     width: 0; 
     transition : width 0.4s ease-in
  }
  .shown {
     width: 300px;
     transition : width 0.4s ease-in
  }
  .mapHideBtn {
     display : inline-block;
     width: 50px;
     height: 50px;
     background : green;
  }
</style>
<script>
  $('.mapHideBtn').hover(function(){
  if ($(this).hasClass("collapsed")) {
    $('.searchBlock').removeClass("hidden").addClass("shown");
    $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
  } 
  else {
   $('.searchBlock').removeClass("shown").addClass("hidden");
   $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
  };
});

您可以使用$(this).next()和toggleClass()DEMO

$('.mapHideBtn').hover(function(){
  $(this).next().toggleClass('shown');
});

更新：如果你想让红条在悬停时保持打开，你可以使用这种纯CSS方法DEMO或将.searchBlock放在.mapHideBtnDEMO

您需要将jQuery选择器更改为$(this)和$(this).next()。

您正在经历的是一种类型的循环，它可以找到您标记的所有选择器，并在它们上运行规则。

给你一把固定的小提琴：https://jsfiddle.net/LmbaL1qo/5/

这是代码：

$('.mapHideBtn').hover(function() {
  if ($(this).hasClass("collapsed")) {
    $(this).next().removeClass("hidden").addClass("shown");
    $(this).removeClass("collapsed").addClass("expanded");
  } else {
    $(this).next.removeClass("shown").addClass("hidden");
    $(this).removeClass("expanded").addClass("collapsed");
  };
});

解决方案很简单：

<script>
    $('.mapHideBtn').hover(function(){
    if ($(this).hasClass("collapsed")) {
        $(this).next().removeClass("hidden").addClass("shown");
        $('.mapHideBtn').removeClass("collapsed").addClass("expanded");
    } 
    else {
        $('.searchBlock').removeClass("shown").addClass("hidden");
        $('.mapHideBtn').removeClass("expanded").addClass("collapsed");
    }
});
</script>
相关文章：