Issue
<div>
<div class="header">
<div id="navbar" >
<ul id="nav">
<li><a id="trigger"><span><p></p></span></a></li>
<li><a id="target"><span><p></p></span></a></li>
</ul>
</div>
</div>
</div>
hey guys, I've got a question, if it wouldn't causing any inconvenience to you guys, in relation with traversing in HTML tree.
I already know how to choose the <a id="trigger"></a>
with this syntax:
div>div.header>div#navbar>ul#nav>li>a#trigger:hover {CSS}
will trigger changes.
But here's the problem, I wanted to target the <a id="target""></a>
tag underneath it but I haven't found the right syntax for accessing the <a id="affected"></a>
there.
I want when I hover the id="trigger", the id="target" will be affected.
I've already tried using + selectors to target that id, alas, the trials ended in vain.
Is it possible to affect that id?
Solution
You probably want the adjacent sibling selector:
#trigger:hover + #target {}
Or maybe the sibling combinator, which doesn't require that the second element be directly adjacent:
#trigger:hover ~ #target {}
http://css-tricks.com/child-and-sibling-selectors
UPDATE: As is stated in the comments below, the selectors must actually be siblings. In the original structure, they're not.
<div>
<div class="header">
<div id="navbar" >
<ul id="nav">
<li class="one"><a id="trigger">Trigger</a></li>
<li class="two"><a id="target">Target</a></li>
</ul>
</div>
</div>
</div>
.one:hover + .two {color: red}
Here's another approach which doesn't require classes or IDs on the li elements:
#nav li:first-child:hover + li {color: red}
Each approach has its pitfalls.
By the way,
div>div.header>div#navbar>ul#nav>li>a#trigger:hover {}
could probably be as well written as
#navbar #trigger:hover {}
saving you and the browser both some work.
Answered By - isherwood
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.