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

Question

我有一个语音气泡（中间的图像），并附有一段文字。下面是四个按钮。这个想法是，当用户将鼠标悬停在按钮上时，语音气泡和伴随的文本会发生变化。

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

我怎样才能做到这一点？

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

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

在这个解决方案中，我使用 jQuery 仅删除您在页面中设置的第一个 active，并使用一个函数在每个 .show-span span:first-of-type 元素上首先删除您的 active 类 mouseover，翻转委托给 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>

Answer 2

请使用下面的代码，它将帮助您解决悬停问题

$('.spanWrappers').each(function() {
    $(this).find('img:first').on('mouseenter', function() {
        var activeSpan = $(this).parent().parent().find('span.show-span');
        activeSpan.addClass('show-span:active');
        activeSpan.removeClass('show-span');
        $(this).parent().parent().siblings().find('span').each(function() {
            var currentActive = $(this).attr('class');
            if(currentActive == 'show-span:active') {
                $(this).removeAttr('class').attr('class','show-span');
            }
        });
    });
});

但请注意，我不建议您使用 CSS pseudo classes，因为您很难找到具有该类名称且其中包含伪类的元素，因此您应该使用活动类来代替使元素处于活动状态。

谢谢