Databases
StackOverflow2013
Postsdbo
PONewbie jQuery ancestory navigation issue
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONewbie jQuery ancestory navigation issue
    text
    copied!<p>Apologies for the basic question but I am trying to add a hover state to a navigation list and cannot seem to work out how to have a hover state over a child without affecting the parent <code>&lt;li&gt;</code>. The parent <code>&lt;li&gt;</code> is technically being hovered over too. I am aware that <code>.add/removeClass()</code> is more ideal but for my testing, it was just easier with <code>.attr()</code>.</p> <p>So far I have got:</p> <p>I have a jsfiddle set up at <a href="http://jsfiddle.net/gSPkj/" rel="nofollow">http://jsfiddle.net/gSPkj/</a> but below is the code-</p> <p>HTML-</p> <pre><code>&lt;div id="sidebarNav"&gt; &lt;ul&gt; &lt;li class="parent"&gt;&lt;a href="page1.html"&gt;Page 1&lt;/a&gt;&lt;/li&gt; &lt;li class="parent"&gt;&lt;a href="page2.html"&gt;Page 2&lt;/a&gt;&lt;/li&gt; &lt;li class="parent"&gt;&lt;a href="page3.html"&gt;Page 3&lt;/a&gt;&lt;/li&gt; &lt;li class="parent"&gt;&lt;a href="page4.html"&gt;Page 4&lt;/a&gt; &lt;ul&gt; &lt;li class="child"&gt;&lt;a href="subpage_of_4-2.html"&gt;Subpage of 4 - 1&lt;/a&gt;&lt;/li&gt; &lt;li class="child"&gt;&lt;a href="subpage_of_4-2.html"&gt;Subpage of 4 - 2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p></p> <p>jQuery -</p> <pre><code> $("#sidebarNav li.parent").hover(function(){ $(this).attr("style","background:#123de1;color:#eb9028;"); },function(){ $(this).attr("style","background:#fff;color:#000;"); }); $("#sidebarNav li.child").hover(function(){ $(this).attr("style","background:#123de1;color:#eb9028;"); $(this).parents(".parent").attr("style","background:#fff;color:#000;"); },function(){ $(this).attr("style","background:#fff;color:#000;"); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload