Hi, i'm relatively new to the world of jquery and javascript so would appreciate some help to get the right approach to this function.
I currently have a dropdown menu - standard css dropdown really
<ul class="hover">
<li><a>
level 1</a></li>
<li #id="tab1">
<a>
level 1</a>
<ul>
<li>
<div class="dropdown"></div></li>
</ul>
</li> <li><a>level 1</a></li>
</ul>
I want to enhance the presentation on hover with jquery so I have taken a few steps already.
1) Firstly I switch a body class from 'no-js' to 'js-ok'. This enables me to stop the standard hover if jquery is enabled.
Typical css would be .no-js .hover li:hover {}so the standard hover would not fire as .no-js ceases to exist.
2) Secondly I re-enable the dropdown using jquery, like this:
$('.hover > li').hoverIntent(
function () { $(this).children('.dropdown').stop(true, true).slideDown(); }, function () { $(this).children('.dropdown').slideUp('fast'); }
You notice I'm using hoverIntent plugin for this.
The last piece of the jigsaw is the hovered li (marked in blue). It contains a tab image that needs to change on hover.
The complexity is that the image is actually a css sprite so the standard hover uses the id #tab1 to replace the image on hover.
I'm thinking that the best approach would be to add a further class then remove it on mouse out, however I don't know what jquery is capable of so there maybe a better function to achieve this.
If anyone has advice it would be very much appreciated.