toggleClass无法按预期悬停 - 不会调整div的大小

Question

我的目标是在悬停时更改div的css类，但这不能正常工作。 （从lsausschreibung顺利改变为resizels）。该代码旨在显示彼此相邻的两个不同大小的盒子，这些盒子将在小盒子的悬停时切换大小。

任何提示都非常感谢！

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

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

.lsausschreibung {
  float: left;
  position: relative;
  margin-right: -10px;
  height: 320px;
  width: 280px; 
  z-index: 10;
  background-color: white;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

.resizels {
  float: left;
  position: relative;
  height: 290px; 
  width: 230px;
  z-index: 1;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: .5s ease-in-out;
}

.rsausschreibung {
  float: left;
  position: relative;
  height: 290px; 
  width: 230px;
  z-index: 1;
  margin-top: 15px;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transition: .5s ease-in-out;
}

.rsausschreibung:hover {
  z-index: 20;
  transition: .5s ease-in-out;
  margin-top: 0px;
  height: 320px;
  width: 280px;
  box-shadow: 5px 2px 14px rgba(0, 0, 0, 0.6); 
}

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

<div class="annonce">

  <div class="lsausschreibung">

  </div>

  <div class="rsausschreibung">

  </div>

Answer 1

这样的事情怎么样？

$(".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>