Jump to content

css hover effect from sibling to elder sibling


ashri
 Share

Recommended Posts

Hi Forum,I have a problem and can't solve this in any way. I want hover effect on hovering sibling to sibling and its parent also.I explain it, When I hover cursor on younger-sibling element hover effect should apply on elder-sibling element and change the color of elder-sibling black to red and parent element should get another color as background color.is there any way to get what I want. please anyone help me. thanks in advance.html and css codes are as followed.<!-- html starts--><body><div class="parent"><div class="elder-sibling">elder-sibling</div><div class="younger-sibling">younger-sibling</div></div></body><!--html ends--><!--css starts--><style type="text/css">.parent { height: 500px; width: 600px; margin-right: auto; margin-left: auto; border: 1px solid #F00;}.elder-sibling { background-color: #000; height: 200px; width: 200px; position: absolute; color: #FFF;}.younger-sibling { background-color: #00F; height: 100px; width: 100px; position: relative; top: 250px; color: #FFF;}</style><!--css ends-->

Link to comment
Share on other sites

You can get same result using unordered list element, with position: absolute elements

<!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">ul,li {margin:0; padding:0; text-indent: 0; list-style-type:none;}#outer {height: 500px;width: 600px;margin-right: auto;margin-left: auto;position:relative;}.parent {height: 500px;width: 600px;border: 1px solid #F00;position:relative;}.elder-sibling {background-color: #000;height: 200px;width: 200px;position: absolute;color: #FFF;top:0;left:0;}.younger-sibling {background-color: #00F;height: 100px;width: 100px;position: absolute;top: 250px;color: #FFF;z-index:20;}#b2 {top:0; left:0; width:200px; height:200px; z-index:30;}#b1 {top:0; left:0; width:100%; height:100%; z-index:10;}ul li b { display:block;  height:100%; width: 100%; position:absolute; z-index:0;}ul li li b { height:100%; width: 100%;}ul li li li b { height:100%; width: 100%;}ul.younger-sibling li,  ul.elder-sibling li{height: 100%; width:100%; z-index:0;}#b1:hover + b {background-color:#FFFFFF;}#b2:hover + b { background-color:#FFFFFF;}ul li:hover{background-color:yellow;}ul li li:hover{background-color:red;}ul li li b:hover{background-color:#000;}ul li li li b:hover{background-color: blue;}</style></head><body><ul id="outer"><li class="parent"><b id="b1"> </b><b> </b><b id="b2"> </b><b> </b>  <ul class="elder-sibling">  <li><b>elder-sibling</b>   <ul class="younger-sibling">    <li><b>younger-sibling</b></li>   </ul>  </li>  </ul></li></ul></body></html>

Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...