Changing element display in hover of another element does not work as it should

Question

Changing element display in hover of another element does not work as it should

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.

When I move the mouse over the div with the class .intro-news the elements appear, and when they exit they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, they are depending on where the arrow is and they do not activate the hover.

I may have let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.

Video demonstrating the problem

Code:

$(".intro-noticias").hover(function() {
    $('.slide-prev,.slide-next').css("display", "block");
}, function() {
    $('.slide-prev,.slide-next').css("display", "none");
});

.intro-noticias {
  width: 100%;
  height: 85vh;
  margin-top: 70px;
}

.slide-prev {
  z-index: 20;
  position: absolute;
  top: 70px;
  left: 0;
  text-indent: -9999px;
  height: 40px;
  width: 40px;
  border: solid 1px #fff;
  background: rgba(0,0,0,0.5);
  display: none;
}

.slide-prev:after {
  content:"icon";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 9.5px;
  left: 2px;
  display: block;
  background: url("img/icones/previous.png") left center no-repeat;
}

.slide-prev:hover {
  background: red;
  transition: all 0.2s ease-in;
}

.slide-next {
  z-index: 20;
  position: absolute;
  top: 70px;
  left: 40px;
  text-indent: -9999px;
  height: 40px;
  width: 40px;
  border: solid 1px #fff;
  background: rgba(0,0,0,0.5);
  display: none;
}

.slide-next:after {
  content:"icon";
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 9.5px;
  right: 2px;
  display: block;
  background: url("img/icones/next.png") right center no-repeat;
}

.slide-next:hover {
  background: red;
  transition: all 0.2s ease-in;
}

<ul>
    <li>
      <div class="intro-noticias">	
          <div>
              <h2></h2>
          </div>
      </div>
    </li>
</ul>

<a href="#" class="slide-prev">Previous</a>
<a href="#" class="slide-next">Next</a>

javascript html css

asked by anonymous 11.02.2017 / 21:29

2 answers

Error updating image "Array to string conversion" Exception in .py file

score 0 · Answer 1

What is happening is that when the mouse enters elements .slide-prev or .slide-next , it sends mouseleave to .intro-noticias , causing this flicker . >

One possible solution in mouseleave is to find out what element is coming in, and if it is one of those buttons, do nothing. For this, we have the relatedTarget , which, in the mouseleave , points to the element that the mouse entered.

According to documentation :

The read-only property MouseEvent.relatedTarget is the secondary target for the event, if any. This is:

mouseleave

currentTarget : The EventTarget that the mouse entered .

So the following change should solve the problem:

$(".intro-noticias").hover(function(e) {

    $('.slide-prev,.slide-next').css("display", "block");

}, function(e) {

    /* não esconder se estiver passando o mouse por cima dos botões */
    if (
        e.relatedTarget && 
        (
            e.relatedTarget.className === 'slide-prev' || 
            e.relatedTarget.className === 'slide-next'
        )
    ) return;

    $('.slide-prev,.slide-next').css("display", "none");
});

score 0 · Answer 2

I added a div with the intro-slides class, I modified the script and it worked

$(".intro-slides").mouseenter(function() {
    $('.slide-prev,.slide-next').css("display", "block");
});
$(".intro-slides").mouseleave(function() {
    $('.slide-prev,.slide-next').css("display", "none");
});

<div class="intro-slides">
 <ul>
    <li>
      <div class="intro-noticias">  
          <div>
              <h2></h2>
          </div>
      </div>
    </li>
  </ul>

  <a href="#" class="slide-prev">Previous</a>
  <a href="#" class="slide-next">Next</a>
</div>