bokotie
asked on
Hover CSS image is not working
For some reason my hover and current state are not working whenever I rollover or click the static image. Can someone please tell me what is wrong with my code? Thank you!
<!--CSS Code-->
<style type='text/css'>
a.current {
background-image: url (images/aa_on.png);
background-repeat: no-repeat; }
#nav a:hover {
background-image: url (images/aa_on.png);
background-repeat: no-repeat;}
</style>
<!--JavaScript Code-->
<script type='text/javascript'>
$(function(){
$('#nav a').click(function(e) {
e.preventDefault();
var panel = $(this).attr('href');
$(this).addClass("current");
$("a", $(this).parents("li").siblings("li")).removeClass("current");
// show slide
$(this).parents("ul").siblings("div").hide();
$(panel).show();
})
});//]]>
</script>
<!--HTML code-->
<td><ul id="nav" style="list-style-type: none; margin: 0;
padding: 0;">
<li><a href="#panel2"><img src="images/aa_off.png" border="0" alt="About ASD" style="display:block;"></a></li>
</ul></td>
<div id="panel2" class="panel">This is panel 2</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Are you using any specific javascript library with this such as jQuery? If so, which version? In your HTML code, you might try moving id="nav" to the li tag instead of the ul tag.
Open in new window