Translate jQuery code to CSS or LESS

Question

Is it possible to translate this code from jQuery to CSS or LESS?

$('li').mouseover(function() {
    if ($('li ul li ul li:hover').length) {
        $('li ul li ul li:hover').css('background', 'red');
    } else if ($('li ul li:hover').length) {
        $('li ul li:hover').css('background', 'red');
    } else {
        $('li:hover').css('background', 'red');
    }
});
$('li').mouseout(function() {
    $(this).css('background', 'transparent');
});

This code is used to hover the elements in a list like here: JSFIDDLE

we are not hero at puzzle solution. clarify the needs with html and your tried css — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Jul 22, 2015 at 9:39
I added an example. When mouse over item => the item and all its children are colored. — svecax
– svecax, Commented Jul 22, 2015 at 9:52

marc_s · Accepted Answer · 2016-06-06 17:01:32Z

2

If I understand correct, you want a pure CSS solution (without jQuery).

Well, it's possible.

The problem is that using a background on the li:hover will also color the children. But when hovering the children, the hover also effects the parent li.

So you'll need to wrap the text in a <span>:

li span {
  display: block;
}
li span:hover,
li span:hover~ul {
  background: red;
}

<ul>
  <li><span>Item 1</span></li>
  <li>
    <span>Group</span>
    <ul>
      <li><span>Item 2</span>
        <ul>
          <li><span>Item 2.1</span></li>
          <li><span>Item 2.2</span></li>
        </ul>
      </li>
      <li><span>Item 3</span></li>
    </ul>
  </li>
</ul>

edited Jun 6, 2016 at 17:01

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 22, 2015 at 9:53

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4881323 · Accepted Answer · 2015-07-22 09:51:35Z

1

Since on hovering of every li color is same

li {
    background: transparent;
}
li:hover {
    background: red;
}

The above code is more than enough (according to my knowledge).

in scss we can write the same as

li {
   background: transparent;

   &:hover {
     background: red;
   }
}

i need to check if there will be any difference in LESS.

answered Jul 22, 2015 at 9:51

user4881323

3 Comments

seven-phases-max Over a year ago

This should be the accepted answer (obviously it's the same in Less, what could be different for such trivial almost pure CSS code?).

user4881323 Over a year ago

Thanks.. I had a small doubt that's what haven't confirmed the same.

user4881323 Over a year ago

We need to add span tag, if we need to get result as in given jsfiddle and the simplified code will be li { span { &:hover, &:hover~ul { background: red; } } }

Darren Willows · Accepted Answer · 2015-07-22 09:52:22Z

0

It looks like you just want to change a list to red when hovered.

so:

li{background-color:transparent;}
li:hover{background-color:#FF0000;}

But I would put in in a class to contain it.

.li-container li{background-color:transparent;}
.li-container li:hover{background-color:#FF0000;}

if you want it purely in css then.

li ul li ul li,li ul li,li{background-color:transparent;}
li ul li ul li:hover,li ul li:hover,li:hover{background-color:#FF0000;}

answered Jul 22, 2015 at 9:52

Darren Willows

2,15615 silver badges21 bronze badges

Collectives™ on Stack Overflow

Translate jQuery code to CSS or LESS

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related