Jump to content

Control Div Properties From Another Div


Fredd

Recommended Posts

How can I do this? <div id="first">First Div</div><div id="second">Second Div</div> #second {opacity: 0;visibility: hidden;} Now I would like to have it so that when somebody hovers over the first div, that the second one will appear. I have been trying for hours with no solution.

Link to comment
Share on other sites

In CSS, you can try this:

#second:hover {visibility: hidden;}

That's using the :hover selector when hovering over the div, you make it disappear. (For hovering over the second) However, to make the second disappear when you hover over the first div, you might have to use JavaScript to do that.

Link to comment
Share on other sites

try
 #first:hover ~ #second {opacity:1; visibility:visible;} 

Note: #second must be a sibling of #first, if any of these element are placed at a different level, it will fail, and JavaScript will be the only option.

Tried to play around with it for several hours, your suggestion did not work.
Link to comment
Share on other sites

As far as I am concerned from testing, siblings can not control each other, only a parent can control its children. But do feel free to prove my wrong by provinding a fully coded example where a sibling controls another sibling.

Link to comment
Share on other sites

No sibling is controling another sibling, it is just a way of targeting an element.

#first ~ #second:hover{visibility:visible}

which means:refrence and style any element's :hover, with id="second", that is preceeded by another element, with id="first".

Link to comment
Share on other sites

You are probably testing it in Crappy IE without a doctype definedtry

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <script type="text/javascript">/*<![CDATA[*//*---->*/ /*--*//*]]>*/</script>  <style type="text/css"> #second {opacity: 0;visibility: hidden;}#first:hover ~ #second {opacity:1; visibility:visible;} </style></head><body> <div id="first">First Div</div><div id="roaming">roaming Div</div><div id="second">Second Div</div> </body></html> 

You can target siblings, but it is very limited #first:hover + #second {} will target the very first sibling element after it, if the this element has this id ="second" the hover effect will take place, else it will fail if used in above code. #first:hover ~ #second {opacity:1; visibility:visible;} will target a sibling only at any location

Link to comment
Share on other sites

Please keep your prejucides for yourself. Thank you for the example. When I tried it, it did work, strangely, I have no idea with I did wrong when I was trying to implement it in my own code. I use the latest stable Google Chrome and I have a valid HTML 5 and CSS 3 markup.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...