CODEWITHSUNDEEP
javascriptjquerycss
Kaimura
Kaimura

Reputation: 43

Activate ':hover' only when mouse moves down list and remove when mouse moves up

So I have to implement a Jquery function in which every li Element is executing the :hover pseudo class (which only changes the background color). So if I hover down to the 4th Element ALL previous li Elements (1st, 2nd, 3th) should have the changed background color from the :hover pseudo class!! But if I move up with the mouse again the :hover effect should disappear (normal background color again) up to the point where my mouse is (if it is on 2nd element only 1st and 2nd have the hover effect now) ... I have absolutely no idea how I can create such a method... I did something like

$('ul li').on('mouseenter') { 
$(this).addClass('hover'); //alternatively $(this).css('background-color', 'grey'); 
}

but it does not remove any :hover effect and it makes failures possible like that only the first and the 5th li Element have the :hover effect but all in between remain normal which I don't want... Could you please help me?

Upvotes: 0

Views: 185

Answers (2)

Leroy
Leroy

Reputation: 2137

In fact this could be done entirely with css. No jQuery or JavaScript is required for this. You should consider using some html structure like this: 

<ul>
   <li><span>Menu item 1</span></li>
   <li>
      <span>Menu item 2</span>
      <ul>
         <li><span>Submenu item 1</span></li>
         <li>
            <span>Submenu item 2</span>
            <ul>
               <li><span>Subsubmenu item 1</span></li>
               <li><span>Subsubmenu item 2</span></li>
               <li><span>Subsubmenu item 3</span></li>
            </ul>
         </li>
         <li><span>Submenu item 3</span></li>
      </ul>
   </li>
</ul>

Then you can use css like this

li:hover > span {
    background: #9a0000;
}

See this jsfiddle: https://jsfiddle.net/aey5cusm/

Or if you ment by first, second, thirth of a single list, it can be done with css too. 

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul:hover li {
  background: #9a0000;
}

li:hover ~ li{
  background: none;
}

Just look at this jsfiddle: https://jsfiddle.net/aey5cusm/1/

Upvotes: 1

transporter_room_3
transporter_room_3

Reputation: 2633

Link to working example on jsfiddle.net

So lets start with some sample markup for a list:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Then some css for your 'hover':

.hover {
  background-color: red;
}

And some javascript to give the functionality:

$(function(){

    // Our list items.
    var listItems = $('ul').children();

    // An event listener over all list items.
    $('li').hover(hoverIn, hoverOut);

    // Find the index of the current element
    // and set all elements up to this element as hover.
    function hoverIn() {
       var index = listItems.index(this);
       $.each(listItems, function(idx, ele) {
          if (idx <= index) {
              $(this).addClass('hover');
          } else {
              $(this).removeClass('hover');
          }
       });
    }

    // Remove all hover.
    function hoverOut() {
      $.each(listItems, function(idx, ele) {
        $(this).removeClass('hover');
      });
    }

});

Upvotes: 1

Related Questions