Reputation: 2021
How do we hover over multiple div in html at the same time?
I have two divs at different positions in a html page.
I want to hover on any of divs and it, and the other div to get selected.
How can I accomplish it using preferably css properties only? currently its going from parent to child not the vice versa,i tried all different combinations. even ~ and + properties.
html code:
<div id=one1>
<div id=two2></div>
</div>
css:
#one1:hover { background-color: yellow;}
#two2:hover { background-color: yellow;}
Upvotes: 2
Views: 4468
Reputation: 2487
If you have a structure similar to the one below, all you have do is add specific styles to the child div
on .parent:hover
:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
css
.parent:hover .child{your style goes here}
Upvotes: 6
Reputation: 115386
Jquery Solution using toggleClass
$(document).ready(function() {
$('.box').click(function() {
$('.box').toggleClass('green');
});
});
HTML
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
CSS
.box {
width:100px;
height: 100px;
border:1px solid grey;
display: inline-block;
}
.green {
background-color: lightgreen;
}
Upvotes: 3