如何使用具有相同的分类div的toggleClass，但不影响其他div

Question

我目前正在寻找一种解决方案，旨在通过这种悬停效果创建其中几个盒子。 最简单的解决方案是每次复制代码并更改ID。现在我正在寻找一个更好，更精益的解决方案，以实现代码段中显示的示例的多个重复。

任何提示都受到高度赞赏。

谢谢！

$(".rsausschreibung").hover(function() {
  $(".lsausschreibung").toggleClass("small large");
  $(".rsausschreibung").toggleClass("small large");
});

.annonce {
  margin-left: 30px; 
  width: auto;
}

.lsausschreibung {
  float: left;
  position: relative;
  margin-right: -10px;   
  background-color: white;    
  transition: all 0.5s ease-in-out;
}

.large {
  height: 320px;
  width: 280px; 
  z-index: 10;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

.small {
  height: 290px; 
  width: 230px;
  z-index: 1;
  margin-top: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.rsausschreibung {
  float: left;
  position: relative;
  z-index: 1;
  background-color: white;
  transition: all 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="annonce">
    <div class="lsausschreibung large">
    </div>
    <div class="rsausschreibung small">
    </div>
</div>

Answer 1

不要在悬停函数中使用类选择器，而是使用$(this)对目标元素的引用：

$(".rsausschreibung").hover(function() {
  $(this).prev().toggleClass("small large");
  $(this).toggleClass("small large");
});

这样，无论mouseover方法是否总体上定位了其他元素，您始终都会定位hover正在发生的元素。

$(".rsausschreibung").hover(function() {
  $(this).prev().toggleClass("small large");
  $(this).toggleClass("small large");
});

.annonce {
  margin-left: 30px; 
  width: auto;
  clear: both;
  margin-bottom: 50px;
}

.lsausschreibung {
  float: left;
  position: relative;
  margin-right: -10px;   
  background-color: white;    
  transition: all 0.5s ease-in-out;
}

.large {
  height: 320px;
  width: 280px; 
  z-index: 10;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

.small {
  height: 290px; 
  width: 230px;
  z-index: 1;
  margin-top: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.rsausschreibung {
  float: left;
  position: relative;
  z-index: 1;
  background-color: white;
  transition: all 0.5s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="annonce">
    <div class="lsausschreibung large" id="el1">
    </div>
    <div class="rsausschreibung small" id="el2">
    </div>


</div>

<div class="annonce">

    <div class="lsausschreibung large" id="el3">
    </div>
    <div class="rsausschreibung small" id="el4">
    </div>
</div>

为了正确显示，需要对样式表进行一些调整，请检查代码段。