jQuery mouseover ignore empty space between elements

Question

How can i say with jQuery mouseover to ignore the empty Space between elements, so the mouseover is still active on an element which is positioned outside of the parent element?

Here's a snippet. The yellow list should be active on mouseover and still active if i go to this list. Currently the mouseout is of course fired if i want to go the the yellow list.

The yellow list should be hided if i leave the yellow list and the current link of the blue list.

$("ul > li")
  .mouseover(function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
  .mouseout(function() {
    $(this).removeClass('active');
    $(this).has('ul').removeClass('has-children visible');
    $(this).find('ul').removeClass('visible');
});

body {
  background:red;
}

div {
  position:relative;
}

ul {
  background:blue;
  color:white;
  padding:10px;
}

div > ul {
  position:absolute;
  left:0;
}

div ul > li > ul {
  position:absolute;
  left:200px;
  top:0;
  display:none;
}

.visible {
  display:block;
}

li.active ul {
  background:yellow;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Link 1
      <ul>
        <li>Link 2</li>
      </ul>
    </li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

yu could use js to add an class on hover to the yellow list which keeps the yellow block displayed.. depends when you want the yellow listing to hide? — Ylama, Dec 13 '17 at 08:56
The yellow list should be hided if i leave the yellow list and the current link of the blue list. — Christopher, Dec 13 '17 at 08:57
But you leave the current link when you go to the yellow div... — Serge K., Dec 13 '17 at 08:58
right. And that's my problem. The yellow list should still be active if i "leave" the current link. If i go to Foo, the yellow list should be hided. If i go back to link1 the list should be visible. It's a horizontal menu. And if i go the Link2/the yellow list the yellow list must be still active on hovering to the yellow list — Christopher, Dec 13 '17 at 08:59
your response is confusing, but now i understand. so on blue hover it shows yellow and on yellow hover it hides yellow (if user pointer leaves the yellow block) so @Chiller has helped you. — Ylama, Dec 13 '17 at 09:01
Yes :) So if you hover over link1 the yellow list is displayed and should still be displayed if you move to the list. Currently you can't go to the yellow list because the empty space between the two lists. — Christopher, Dec 13 '17 at 09:02
You might want to check this fiddle out. Hope this helps! [Hover Remain](https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering) — RXD, Dec 13 '17 at 09:05

Chiller · Accepted Answer · 2017-12-13T09:21:24.757

Use left:100%; to make it align right after the main sidebar

$("ul > li")
  .mouseover(function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
  .mouseout(function() {
    $(this).removeClass('active');
    $(this).has('ul').removeClass('has-children visible');
    $(this).find('ul').removeClass('visible');
});

body {
  background:red;
}

div {
  position:relative;
}

ul {
  background:blue;
  color:white;
  padding:0;
  list-style-type: none;
  
}

div > ul {
  position:absolute;
  left:0;
  
}
div ul > li {
  position:relative;
  padding:5px 10px;
}

div ul > li > ul {
  position:absolute;
  left: 100%;
  top:0;
  min-width: 90px;
  display:none;
}

.visible {
  display:block;
}

li.active ul {
  background:yellow;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Link 1
      <ul>
        <li>Link 2</li>
      </ul>
    </li>
    <li>Foo1
    <ul>
        <li>Foo2</li>
      </ul>
    </li>
    <li>Bar</li>
  </ul>
</div>

score 2 · Answer 2 · answered Dec 13 '17 at 09:05

Easiest way it's not move left:200px; your item, instead of this wrap in something and extend inner space with padding to 200px, like this:

<div>
  <ul>
    <li>Link 1
      <div> <!-- add padding-left: 200px -->
        <ul> <!-- remove left: 200px -->
          <li>Link 2</li>
        </ul>
      </div>
    </li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

I'm talking about case when you need just move for 200px to the right

score 1 · Answer 3 · answered Dec 13 '17 at 09:10

Apply a width and height to the div, and change your events to mouseenter and mouseleave:

$("ul > li").mouseenter(function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
$("div").mouseleave(function() {
    $("li").removeClass('active');
    $("li").removeClass('has-children visible');
    $('ul').removeClass('visible');
})

body {
  background:red;
}

div {
  position:relative;
  border: 1px solid black;
  width: 280px;
  height: 100px;
}

ul {
  background:blue;
  color:white;
  padding:10px;
}

div > ul {
  position:absolute;
  left:0;
}

div ul > li > ul {
  position:absolute;
  left:200px;
  top:0;
  display:none;
}

.visible {
  display:block;
}

li.active ul {
  background:yellow;
  color:black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Link 1
      <ul>
        <li>Link 2</li>
      </ul>
    </li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

score 0 · Answer 4 · answered Dec 13 '17 at 09:09

Another way would be to hide the yellow list only when you hover the other links, depending on your needs. Otherwise you cannot hide the yellow list when you go out of its link unless the user wants to reach it.

$("ul > li").mouseover(function() {
  $('.active').removeClass('active');
  $('.visible').removeClass('visible');
  $(this).addClass('active').find('ul').addClass('visible');
});

body {
  background: red;
}

div {
  position: relative;
}

ul {
  background: blue;
  color: white;
  padding: 10px;
}

div>ul {
  position: absolute;
  left: 0;
}

div ul>li>ul {
  position: absolute;
  left: 200px;
  top: 0;
  display: none;
}

.visible {
  display: block;
}

li.active ul {
  background: yellow;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Link 1
      <ul>
        <li>Link 2</li>
      </ul>
    </li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

jQuery mouseover ignore empty space between elements

4 Answers4