Jump to content

Control Div Properties From Another Div


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 post
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.

Edited by Don E
Link to post
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 post
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.

Edited by Fredd
Link to post
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".

Edited by O. Samuel
Link to post
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

Edited by dsonesuk
Link to post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...