CODEWITHSUNDEEP
htmlcsscss-selectors
Gyanesh Gouraw
Gyanesh Gouraw

Reputation: 2021

Selecting multiple divs in html

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

Answers (3)

ramesh
ramesh

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

Paulie_D
Paulie_D

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;
}

JSfiddle Demo

Upvotes: 3

Richa
Richa

Reputation: 3289

Did you mean something like this Fiddle

#one:hover ~ #two , 
#one:hover ~ #three  
{ background-color: yellow; }

Upvotes: 12

Related Questions