Databases
StackOverflow2013
Postsdbo
POJquery .hover adding a class - Or Child:hover to affect parent?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery .hover adding a class - Or Child:hover to affect parent?
    text
    copied!<p>I have looked around and cant find anything specific to my needs and im having some trouble getting what I thought would be a simple jquery to actually work. </p> <p>Here is my simple fiddle <a href="http://jsfiddle.net/LBHxc/" rel="nofollow">http://jsfiddle.net/LBHxc/</a> (apologies as it doesnt seem to be importing the image ive hosted externally. </p> <p>Html Code... </p> <pre><code>&lt;nav class="nav-buttons"&gt; &lt;ul&gt; &lt;li class="nav-button"&gt;&lt;a href="#"&gt;Services&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-button"&gt;&lt;a href="#"&gt;Work&lt;/a&gt; &lt;/li&gt; &lt;li class="nav-button top-menu"&gt; &lt;a href="#"&gt;Insight&lt;/a&gt; &lt;ul class="sub-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="nav-button"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>Css Code </p> <pre><code>.nav-buttons { float:left; margin-top: 10px; width: 370px; height: 20px; } .nav-buttons a { padding:0 1px 20px 0; display:block; color: #e4e4e4; text-transform: uppercase; text-decoration:none; -webkit-transition: color .06s ease-in; -moz-transition: color .06s ease-in; -o-transition: color .06s ease-in; transition: color .06s ease-in; } .nav-button { position: relative; padding: 0; font-size:13px; font-family: helvetica, sans-serif; font-style: normal; font-weight: 700; margin: 0 10px; display: block; float: left; } .top-menu:hover .sub-menu { display:block; } .top-menu a:hover { background:url(www.anim-house.co.uk/images/drop-down-arrow.png) no-repeat; background-position: 50% 26px; } .sub-menu { list-style-type: none; display:none; position: absolute; top: 36px; left:-400px; width: 600px; } .sub-menu a { width:178px; height:150px; background:#3ca3c5; float:left; display:block; padding:11px; } .sub-menu a:hover { background:#3ca3c5; color:#2b2b2b!important; } .menu-drop-down { background:url(www.anim-house.co.uk/images/drop-down-arrow.png) no-repeat; background-position: 50% 26px; } </code></pre> <p>JavaScript</p> <pre><code>$('.sub-menu').hover( function () { $('.top-menu a').addClass('menu-drop-down'); }); </code></pre> <p>What I want to acheive here is when you hover over "insight" you get a dropdown box (3 large buttons) and linking these box's to insight is a little arrow of the same shade blue <a href="http://www.anim-house.co.uk/images/drop-down-arrow.png" rel="nofollow">http://www.anim-house.co.uk/images/drop-down-arrow.png</a> &lt;-- that When you then go hover on sub-menu I want the arrow to remain under insight. I have read up into child elements not being able to affect their parents without the use of javascript but I'm struggling to implement. Any help would be appreciated! (And if you could let me know where i have gone wrong.. I am after all on a mission to learn hehe)</p>
 

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