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

时间：2018-10-23 16:53:22

标签： javascript jquery html css hover

我有一个讲话泡泡（中间的图像）和一段文字。在此下方是四个按钮。这个想法是，当用户将鼠标悬停在按钮上时，语音气泡以及伴随的内容和文本将发生变化。

我已经通过使用兄弟姐妹来完成了这一部分的工作，但是我希望在页面最初加载时以及当用户将鼠标悬停在按钮上时，第一个语音气泡是活动的，活动类将从中移除并应用于新的语音气泡。

我该如何实现？

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

2 个答案:

答案 0 :(得分：1)

请在下面使用此代码，它将帮助您对悬停问题进行排序

$('.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，因为要查找具有该类名称且包含伪类的元素会变得非常困难，因此您应该使用活动类而是使元素处于活动状态。

谢谢

答案 1 :(得分：1)

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

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

相关问题
最新问题