Having a problem creating a color fade effect on menu items using jquery, html and css
For giggles, I'm creating an image free, but interacting website. On the menu, I want each item to fade to gray on mouseove开发者_如何学Pythonr, and then fade back to white on mouseout. Currently, all of the menu items fade in unison. For many who inspect my code, you'll surely see why in quick time. I'm just too new to it.
Link to site: Zero Img Site
jQuery stuff:
<head>
<title>Imageless Website in HTML5, jQuery and CSS</title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- <script type="text/javascript" src="js/CreateHTML5Elements.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js"></script>
</head>
<script>
$(document).ready(function(){
$(".block").mouseover(function(){
$(".block").animate( { backgroundColor: '#777777' }, 100)
});
$(".block").mouseout(function(){
$(".block").animate( { backgroundColor: 'white' }, 200)
});
});
</script>
HTML Stuff:
<a href="http://www.example.com">
<div class="block">
home
</div>
</a>
<a href="http://www.example.com">
<div class="block">
about
</div>
</a>
<a href="http://www.example.com">
<div class="block">
contact
</div>
</a>
</nav>
You need to change the .block selectors in the mouseover functions so they simply act on the element you are mouseovering. You do this by using the keyword this.
$(".block").mouseover(function(){
$(this).animate( { backgroundColor: '#777777' }, 100)
});
$(".block").mouseout(function(){
$(this).animate( { backgroundColor: 'white' }, 200)
});
加载中,请稍侯......
精彩评论