CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ridd
Ridd

Reputation: 11907

Bootstrap - hover one change another

I don't know how to do this: I want change color class = "dropdown-toggle" when I hover .dropdown-menu li

.dropdown-menu li:hover (or li > a) (~ or + or >) .dropdown-toggle {...} - its not working

Can I do it in CSS?

My code follows below:

<li class = "dropdown"> 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> Lorem ipsum</a>
    <ul class = "dropdown-menu">    
        <li><a href="video.html"> Hellooooo </a></li>
        <li class="divider"></li>
        <li><a href="#"> Blablabla </a></li>
    </ul>
</li>

Upvotes: 1

Views: 89

Answers (3)

tallrye
tallrye

Reputation: 181

I think you can also use Jquery for this.

jsFiddle

$(document).ready(function(){
   var menuItem = $('.dropdown-menu li');
   var itemToChange = $('.dropdown-toggle');
   menuItem.on('mouseenter', function(){
     itemToChange.css('background-color', 'red');
   });
   menuItem.on('mouseleave', function(){
      itemToChange.css('background-color', '');
   });
});

Hope this helps.

Upvotes: 1

Hoijof
Hoijof

Reputation: 1413

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in the CSS selectors specs, either CSS 2 or 3

You'll have to use js to do that.

EDIT: You could use the workaround that @Mr. Alien put in his answer.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

The best thing you can do here with pure CSS is

ul li.dropdown:hover > a {
    background-color: red;
}

Demo

Over here, am selecting the anchor tag which is a direct child to li.dropdown on hover of the .dropdown which holds the sub ul

Upvotes: 0

Related Questions