Hi is the following possible? When We hover over the link in Div A, the background colour changes in Div B? So hovering over one div changes the state of another Div? I can do this by placing the Div B in the anchor tag of Div A but this isn't very valid is it? It also causes a lot of extra Div's which the Search Engines won't like too much (not too sure on this one). If this is not possible I might just go for a JavaScript solution so the enhancement is always there if people have JS and if not they have no fancy hovers!! For more information this is exactly what i'm trying to achieve, it's a working solution. The only problem is: 1. Is so Many Div's a disadvantage to the SEO? 2. Div's inside anchor tags Which gives me 3 options, stick to this solution, go for a Javascript solution, or lastly go for your advice!! Here is my current solution: <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css" media="screen"> .rounded, .top, .bottom{ width: 100%; } .top, .bottom, .topr, .bottomr { height: 12px; } .top { background-color:#0000FF;} .topr { background-color:green; margin-left: 12px;} .bottom{ background-color:#0000FF; } .bottomr{ background-colour: green; margin-left:12px; } .vidc { background-color: red; margin-right:5px; height: 100px; line-height: 100px;} .middle{ background-color: yellow; width:100%;} .right { background-color: yellow; margin-left:5px;} .post2 { text-align: center; background-repeat: no-repeat;} .post2 a { display:block; } .post2 a:hover { background-color: pink;} .post2 a:hover #move1 { background-color: orange; position: relative; top:0px; left:-5px; width: 100%; height: 12px; } .post2 a:hover #move2 { background-color: black; position: relative; top:0; left: 10px; height: 12px; margin-left: 3px; } .post2 a:hover .test { height: 100px; background-color: #99FF00; width: 5px; float: left; position: relative; left: -5px; } .post2 a:hover .test2 { float: right; height: 100px; width: 5px; position: relative; right: -5px; background-color: #00FF66;} </style> </head> <body> <div class="rounded"> <div class="top"><div class="topr"></div></div> <div class="middle"><div class="right"><div class="vidc"> <div class="post2"> <a href="something.html"><div class="test"></div><div class="test2"></div>Some Text<div id="move1"><div id="move2"></div></div></a> </div></div></div></div> <div class="bottom"><div class="bottomr"></div></div> </div> </body> </html> Code (markup): That's a lotta Div's I know, is this bad?! Sorry i could not post to testing server!! Many Thanks in advance to anybody who can offer help!
The general idea is that to affect div B it has to at least be a sibling to div A. That means at least one extra parent. Something like (and I'm pulling this out of my ass but comes from menus): <div id="parent"> <div class="b"> stuff </div> <div class="a"> <a href="#"> blah </a> </div> </div> #parent .a :hover >div { new styles }