У меня есть речевой пузырь (изображение в центре) с сопровождающим фрагментом текста. Ниже четыре кнопки. Идея состоит в том, что, когда пользователь наводит курсор на кнопку, всплывающая подсказка, сопровождающий текст и текст изменяются.

У меня эта часть работает с использованием братьев и сестер, однако я хочу, чтобы первый речевой пузырь был активен при первоначальной загрузке страницы, и когда пользователь наводит курсор на кнопку, активный класс будет удален из этого и применен к новому речевому пузырю.

Как я могу этого достичь?

$(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 из того, что у меня есть

0
Jelly-Bandit 23 Окт 2018 в 19:53

2 ответа

Лучший ответ

Как сказал другой пользователь в комментариях, вы запускаете событие наведения как 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>
1
ReSedano 24 Окт 2018 в 08:33

Используйте этот код ниже, он поможет вам решить проблему зависания.

$('.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
Rajender Verma 23 Окт 2018 в 17:47
52954189