How To Do Multiple Hover On List - html

Question

Alright so i wanted to know how i can select multiple items on hover for example when i hover on list a Highlight a and on list b, give that list box shadow. ive tried to code it but for some reason im not able to do the multiple hover effect.
CSS Code:
#a:hover ~ #b {
background: #ccc
}
HTML Code:
<div><ul id="a"><li>Div A</li></ul></div>
<div>random elements</div>
<div>random elements</div>
<div>random elements</div>
<div><ul id="b"><li>Div B</li></ul></div>

Answer 1

The tilde ~ is for siblings.
But #b is not a sibling for #a
Change the id and it will work : (http://jsbin.com/AxUzOX/1/edit)
<div id="a">
<ul >
<li>Div A</li>
</ul>
</div>
<div>
random elements
</div>
<div>
random elements
</div>
<div>
random elements
</div>
<div id="b">
<ul >
<li>Div B</li>
</ul>
</div>
here is the jquery solution if you want http://jsbin.com/AxUzOX/4/edit

Answer 2

This is the jquery I have used
$('#a').hover(function(){
$('#a').css('background','#ccc');
$('#b').css('background','#ccc');
}, function(){
$('#a').css('background','#fff'); // Background of #a by default
$('#b').css('background','#fff'); // Background of #b by default
})
$('#b').hover(function(){
$('#a').css('background','#ccc');
$('#b').css('background','#ccc');
}, function(){
$('#a').css('background','#fff'); // Background of #a by default
$('#b').css('background','#fff'); // Background of #b by default
})
If you are changing the background of #a or #b,
specify the color to the places I had mentioned too. Simple :)

Answer 3

You should actually mention some class name or id name to the parent div which has the ul #a but as you don't want to assign it, you can use :first-child as shown below:
#a:hover {
background: #ccc
}
div:first-child:hover ~ div>ul#b{
color: red;
}
As you can see, I am hovering on the first child of div instead of ul because hovering on ul is same as hovering on parent div in your case.
I have did this way because there is no parent selector available in css not even in css3/css4.
Working Fiddle
Updated
for your previous sibling selector issue, use jquery
$('#b').hover(function() { $('#a').css('color','blue'); });
The other things you can do using just css as usual :)

Answer 4

If you add a wrapper div, you can accomplish it without any js.
The only issue with your example is the middle <div> that don't have any effects applied, so the jsfiddle solution will look a tad odd, but play with the effects and it might be what you want.
The idea is that you will hover the parent and apply a style to both, then when ALSO hovering over the child, apply different styles to that child.
Also try to not use ids if possible, they restrict you more than you often need.
.parent:hover .list-a, .parent:hover .list-b {
box-shadow: 3px 3px 5px 6px #ccc;
}
.parent .list-a:hover {
box-shadow: none;
background:#aaa;
}
.parent .list-b:hover {
box-shadow: none;
background:#4c4;
}
http://jsfiddle.net/tHTN4/
Now let's re-edit the jQuery part. Since you don't know any jQuery, or the knowledge isn't large. jQuery (a tool on top of Javascript) just helps you manipulate the HTML (DOM) in easy and efficient ways. To help you not edit css in multiple places, use the addClass and removeClass functions:
$(function(){
$('#a').hover(function(){
$('#a').addClass('.list-one-effect');
$('#b').addClass('.list-two-effect');
}, function(){
$('#a').removeClass('.list-one-effect');
$('#b').removeClass('.list-two-effect');
})
});
Once you remove the class, it will automatically revert to the original state (or the last altered state! from other effects). There is also a toggleClass function in jQuery, but I'd recommend you don't use that, as the above will always tell you what state you are in when. For completeness, this is wrapped in $(function(){}), which is one common way to make sure you have loaded jQuery AND the page is ready to run this code.