How to efficiently use jQuery mouseover by ignoring any empty space between elements

Question

How to efficiently use jQuery mouseover by ignoring any empty space between elements

Is there a way to use jQuery mouseover to maintain its functionality even if the element is positioned outside of the parent element?

For example, in the code snippet provided, the yellow list should remain active on mouseover, even if I navigate to it. Currently, the mouseout event is triggered when moving to the yellow list.

The yellow list should be hidden when leaving both 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>

javascript jquery html css

Answer 1

Answer №1

To align an element to the right after the main sidebar, you can use the CSS property left:100%;.

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

Answer 2

To align an element to the right after the main sidebar, you can use the CSS property left:100%;.

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

Answer 3

Answer №2

To easily position your item 200px to the right, you can wrap it in a container and use padding instead of directly applying left:200px;. Here's an example:

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

This technique is useful when you only need to move the content by 200px horizontally.

Answer 4

To easily position your item 200px to the right, you can wrap it in a container and use padding instead of directly applying left:200px;. Here's an example:

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

This technique is useful when you only need to move the content by 200px horizontally.

Answer 5

Answer №3

Make sure to set a specific width and height for the div, and update your event triggers to mouseenter and mouseleave:

$("ul > li").on("mouseenter", function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
$("div").on("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>

Answer 6

Make sure to set a specific width and height for the div, and update your event triggers to mouseenter and mouseleave:

$("ul > li").on("mouseenter", function() {
    $(this).addClass('active').has('ul').addClass('has-children');
    if($(this).hasClass('has-children')){
      $(this).find('ul').first().addClass('visible');
    }
})
$("div").on("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>

Answer 7

Answer №4

To create a more dynamic user experience, you can choose to conceal the yellow list only when hovering over other links. This way, the yellow list will remain visible unless the user intentionally wants to access 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>

Answer 8

To create a more dynamic user experience, you can choose to conceal the yellow list only when hovering over other links. This way, the yellow list will remain visible unless the user intentionally wants to access 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>

How to efficiently use jQuery mouseover by ignoring any empty space between elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to retrieve objects from an array sent via ajax and posted to PHP in PHP?

I am struggling to prevent the background image from endlessly repeating despite my best coding efforts

Having trouble setting the function props type for its child in Typescript? Getting an error that says "Property 'children' does not exist on type TS2339"?

Eradicating a character from an Object using Jquery/Javascript

JavaScript replaces existing content on the screen and triggers a page reload

Using the Vue.js Spread Operator in place of Vue.set or Vue.delete

Automatically filling text fields in JSP using data population algorithms

Incorporating Facebook Connect within a Facebook Page

What is the best way to decode a combination of UTF16 and normal characters in JavaScript/Node.js?

Tips for vertically aligning text in the center with bootstrap

What are the steps to export a JSON response to an Excel file using JavaScript?

Is there a way to prevent the Sticky Footer from obscuring the content?

Whenever I press it, it always ends up as the final available option

Modify the value of one textbox as you type in another textbox using jQuery

Using Jquery to transfer text from a form to a DIV and ensuring the final character is verified

What is the best way to retrieve all the listed TV and film ratings in descending order? Using Django

iOS and Phonegap now feature vertical swipe and drag screens for seamless navigation

How can you align elements like a poster board using CSS?

Retrieve the value of the Data-dir attribute using jQuery and transfer it to PHP

Error encountered: JSON parsing failed due to an unexpected token 'm' at the beginning of the data while