How to display a
on hover on another

Question

i Have used bootstrap and css , here is my code

<div class = "row" id="parent"=>

  <div class="col-md-8" id="ClildDiv1">

  //Some Content

</div>

<div class="col-md-4" id="ChildDiv2" style="display:none">

  //Some Content

<div>

</div>

Now i want on hover on <div class="row Parent> All its Child should be visible in this case <div class="col-md-4 ChildDiv2">

Any Help Would Be Appreciated And i want to achieve that only by CSS styling

The code you've shared is not good enough for this question - the tags don't even match — StudioTime, Mar 30 '17 at 17:57
This question has been asked at least 30 times on this site in the CSS tag alone. Please search a little harder next time! :-) — TylerH, Mar 30 '17 at 18:18

sn3ll · Accepted Answer · 2017-08-18T12:56:55.400

5

You want one of the sibling selectors. General sibling ~ or next sibling +

.ClildDiv1:hover ~ .ChildDiv2 {
    display: block;
}

See fiddle here

Or, the parent hover for any child div would be

.Parent:hover > div {
  display: block;
}

edited Aug 18 '17 at 12:56

answered Mar 30 '17 at 17:59

sn3ll

1,629
1
10
16

`.Parent:hover > div` saves my time , Thanks for it !! – angular.aditya Mar 30 '17 at 18:23

How to display a on hover on another

1 Answers1

How to display a
on hover on another