Question

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

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 < / strong>到其他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/

通过通用鼠标在事件上添加类

1 个答案: