ashri Posted May 5, 2012 Share Posted May 5, 2012 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 More sharing options...
dsonesuk Posted May 5, 2012 Share Posted May 5, 2012 At present there's no way to target preceding sibling elements OR parent element in CSS, for a succeeding sibling element yes! with '+' or '~', this could be achieved using JavaScript/Jquery though. Link to comment Share on other sites More sharing options...
ashri Posted May 5, 2012 Author Share Posted May 5, 2012 @dsonesukthanks to reply and makeing awareness to me. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 5, 2012 Share Posted May 5, 2012 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 More sharing options...
ashri Posted May 24, 2012 Author Share Posted May 24, 2012 (edited) @dsonesuk this is exactly what i want thank you!and sorry to late reply Edited May 24, 2012 by ashri Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now