javascript - 悬停在一个单独的元素上时如何在一个元素上添加/删除类？

Question

我有一个对话泡泡(中间的图片)和一段文字。下面是四个按钮。这个想法是，当用户将鼠标悬停在按钮上时，对话泡泡和伴随的文本将会改变。

我已经通过使用 sibling 使该部分工作，但是我希望第一个语音气泡在页面最初加载时处于事件状态，并且当用户将鼠标悬停在按钮上时，事件类将从中删除并应用于新语音气泡。

我怎样才能做到这一点？

$(document).ready(function() {

  $('.spanWrappers').hover(function() {
    $(".show-span").addClass("active");
  }, function() {
    $(".show-span").removeClass("active");
  });

});

.bubble {
  z-index: 1;
  position: absolute;
  width: 335px;
  float: left;
  left: 8px;
  top: 28px;
}

span.one:hover+.show-span {
  display: block;
}

span.two:hover+.show-span {
  display: block;
}

span.three:hover+.show-span {
  display: block;
}

span.four:hover+.show-span {
  display: block;
}

.show-span {
  display: none;
}

.show-span:active {
  display: block;
}

.top {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 460px;
  /*       height: 500px;*/
  /*        height: 55vh;*/
  background: url(img/banner-1.svg), #2e4355;
  background-size: 110%, cover;
  background-position: center bottom, center;
  background-position-y: 100.5%;
  background-repeat: no-repeat;
}

.roll-icon-1,
.roll-icon-2,
.roll-icon-3,
.roll-icon-4 {
  z-index: 2;
  width: 45px;
}

.roll-icon-1 {
  position: absolute;
  left: 26px;
  top: 395px;
  border-radius: 50%;
}

.roll-icon-2 {
  position: absolute;
  left: 97px;
  top: 422px;
  border-radius: 50%;
}

.roll-icon-3 {
  position: absolute;
  left: 175px;
  top: 424px;
  border-radius: 50%;
}

.roll-icon-4 {
  position: absolute;
  left: 255px;
  top: 393px;
  border-radius: 50%;
}

.swap img:last-child {
  display: none
}

.swap:hover img:first-child {
  display: none
}

.swap:hover img:last-child {
  display: inline-block
}

.bubble-widget {
  overflow-x: hidden;
  display: block;
  /*background-color: pink;*/
  max-width: 800px;
  height: 520px;
  position: relative;
  left: 0;
  top: 0;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 111px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bubble-widget">
  <div class="spanWrappers">
    <span class="one">
      <img class="roll-icon-1" src="https://placeimg.com/85/83/buildings">
      </span>
    <span class="show-span:active">
         <img class="bubble" src="https://i.imgur.com/PQpLHWD.png"/>
         <p>text-title-1</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="two">
      <img class="roll-icon-2" src="https://placeimg.com/85/83/animals">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/Y6S0iyq.png"/>
         <p>text-title-2</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="three">
      <img class="roll-icon-3" src="https://placeimg.com/85/83/people">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/akhIh5Y.png"/>
         <p>text-title-3</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="four">
      <img class="roll-icon-4" src="https://placeimg.com/85/83/nature">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/R9PF7kt.png"/>
         <p>text-title-4</p>
      </span>
  </div>
  <!--spanWrappers-->
</div>

这是一个JSFiddle到目前为止我所拥有的

Answer 1

正如另一位用户在评论中所说，您正在触发 CSS 和 jQuery 的悬停事件。

在这个解决方案中，我只使用 jQuery 来删除第一个 active您在页面中设置了一个功能，可以删除您的 active先上课mouseover在每个 .show-span span:first-of-type元素，翻转委托(delegate)给 CSS。

您的 HTML 是相同的。我试图清理你的 CSS 只是因为有规则重复(我也将 .show-span:active 更改为更简单的 .show-span .active 。

$(function() {
  $(".spanWrappers span:first-of-type").one("mouseover", function(e){
    $(".show-span").removeClass("active")
  })
});

.bubble {
  z-index: 1;
  position: absolute;
  width: 335px;
  float: left;
  left: 8px;
  top: 28px;
}

.show-span {
  display: none;
}

.spanWrappers .show-span.active,
.spanWrappers span:first-of-type:hover + .show-span{
  display: block;
}


img[class^='roll']{
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  width: 45px;
}


.roll-icon-1 {
  left: 26px;
  top: 395px;

}

.roll-icon-2 {
  left: 97px;
  top: 422px;
}

.roll-icon-3 {
  left: 175px;
  top: 424px;
}

.roll-icon-4 {
  left: 255px;
  top: 393px;
}


.bubble-widget {
  overflow-x: hidden;
  display: block;
  /*background-color: pink;*/
  max-width: 800px;
  height: 520px;
  position: relative;
  left: 0;
  top: 0;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 111px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bubble-widget">
  <div class="spanWrappers">
    <span class="one">
      <img class="roll-icon-1" src="https://placeimg.com/85/83/buildings">
      </span>
    <span class="show-span active">
         <img class="bubble" src="https://i.imgur.com/PQpLHWD.png"/>
         <p>text-title-1</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="two">
      <img class="roll-icon-2" src="https://placeimg.com/85/83/animals">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/Y6S0iyq.png"/>
         <p>text-title-2</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="three">
      <img class="roll-icon-3" src="https://placeimg.com/85/83/people">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/akhIh5Y.png"/>
         <p>text-title-3</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="four">
      <img class="roll-icon-4" src="https://placeimg.com/85/83/nature">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/R9PF7kt.png"/>
         <p>text-title-4</p>
      </span>
  </div>
  <!--spanWrappers-->
</div>

编辑 1

对于您评论中的问题，我只使用 jQuery:正在处理 mouseover仅功能(我还更改了 CSS，请小心)。

$(function() {
  $(".spanWrappers span:first-of-type").on("mouseover", function(e){
    $(".show-span").removeClass("active");
    $(this).next().addClass("active");
  })
});

.bubble {
  z-index: 1;
  position: absolute;
  width: 335px;
  float: left;
  left: 8px;
  top: 28px;
}

.show-span {
  display: none;
}

/*.spanWrappers .show-span.active,
.spanWrappers span:first-of-type:hover + .show-span{
  display: block;
}*/

.spanWrappers .show-span.active{
  display: block;
}


img[class^='roll']{
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  width: 45px;
}


.roll-icon-1 {
  left: 26px;
  top: 395px;

}

.roll-icon-2 {
  left: 97px;
  top: 422px;
}

.roll-icon-3 {
  left: 175px;
  top: 424px;
}

.roll-icon-4 {
  left: 255px;
  top: 393px;
}


.bubble-widget {
  overflow-x: hidden;
  display: block;
  /*background-color: pink;*/
  max-width: 800px;
  height: 520px;
  position: relative;
  left: 0;
  top: 0;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 111px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bubble-widget">
  <div class="spanWrappers">
    <span class="one">
      <img class="roll-icon-1" src="https://placeimg.com/85/83/buildings">
      </span>
    <span class="show-span active">
         <img class="bubble" src="https://i.imgur.com/PQpLHWD.png"/>
         <p>text-title-1</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="two">
      <img class="roll-icon-2" src="https://placeimg.com/85/83/animals">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/Y6S0iyq.png"/>
         <p>text-title-2</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="three">
      <img class="roll-icon-3" src="https://placeimg.com/85/83/people">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/akhIh5Y.png"/>
         <p>text-title-3</p>
      </span>
  </div>
  <!--spanWrappers-->
  <div class="spanWrappers">
    <span class="four">
      <img class="roll-icon-4" src="https://placeimg.com/85/83/nature">
      </span>
    <span class="show-span">
         <img class="bubble" src="https://i.imgur.com/R9PF7kt.png"/>
         <p>text-title-4</p>
      </span>
  </div>
  <!--spanWrappers-->
</div>