Как добавить / удалить класс на одном элементе при наведении на отдельный элемент? - PullRequest
Новая
       8

Как добавить / удалить класс на одном элементе при наведении на отдельный элемент?

0 голосов
/ 23 октября 2018

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

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

Как мне этого добиться? 

$(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 голосов
/ 24 октября 2018

Как сказали другие пользователи в комментариях, вы запускаете событие наведения как 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: workingтолько для функции 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>
0 голосов
/ 23 октября 2018

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

$('.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, так как это будет довольно сложновам нужно найти элемент с тем именем класса, в котором есть псевдокласс, так что вместо этого вы должны использовать активный класс, чтобы сделать элемент активным.

Спасибо

...