jquery - 通过通用鼠标悬停事件添加类

Question

我在主页上有四个背景图像，每个背景图像的父级都有 25% 的宽度，这样它们就可以全屏显示，现在我必须做一些事情，比如当其中一个悬停时我需要添加类 width-37 这意味着我正在增加该特定 div 的宽度，通过增加该特定 div 的宽度，然后需要减少其他 div 的宽度，以便它们可以保持在同一行为此，我将把 width-27 类添加到除当前具有 width-37 的 div 之外的 div 中这是我当前的代码

HTML:-

<div class="index-rel" id="index-height">
  <div class="width-25">
    <div class="img img1"></div>
  </div>
  <div class="width-25">
    <div class="img img2"></div>
  </div>
  <div class="width-25">
    <div class="img img3"></div>
  </div>
  <div class="width-25">
    <div class="img img4"></div>
  </div>

  <div class="index-abs">

  </div>
</div>

CSS:-

.index-rel {
  position: relative;
}

.index-rel .width-25 {
  width: 25%;
  display: inline-block;
  float: left;
  height: 100%;
  transition: all 0.5s ease;
}

.index-rel .width-37 {
  width: 37%;
}

.index-rel .width-21 {
  width: 21%;
}

.index-rel .img {
  background-size: cover;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 53% center;

  }

.index-rel .img1 {
  background-image: url("../images/index (3).jpg");
}

.index-rel .img2 {
  background-image: url("../images/index (4).jpg");
}

.index-rel .img3 {
  background-image: url("../images/index (1).jpg");
}

.index-rel .img4 {
  background-image: url("../images/index (2).jpg");
}

jQuery:-

$("#index-height").height($(window).height());

$(document).ready(function() {
  $(".index-rel .width-25").mouseover(function() {
    $(this).addClass("width-37");
  });
  $(".index-rel .width-25").mouseout(function() {
    $(this).removeClass("width-37");
    $(this).removeClass("width-21");
  });
});

现在的问题是我无法真正在Jquery中实现鼠标悬停的逻辑，将width-37添加到当前div并添加width-21 到其他 div!有什么帮助吗？

Jsbin

Answer 1

需要执行如下操作:-

$("#index-height").height($(window).height());

$(document).ready(function(){
    $(".width-25").mouseover(function(){
        $(this).addClass("width-37");
        $('.index-rel').children().not($(this)).addClass('width-21');
    });
    $(".width-25").mouseout(function(){
        $('.index-rel').children().removeClass('width-21');
        $('.index-rel').children().removeClass('width-37');
    });
});

工作示例:- https://jsfiddle.net/5gcLq089/