为了咯咯笑，我正在创建一个免费的图像，但可以互动的网站。在菜单上，我希望每个元素在 mouseover 时淡化为灰色，然后在 mouseout 时淡化回白色。目前，所有菜单项都会同时淡出。对于许多检查我的代码的人来说，您一定会很快明白原因。我对它太陌生了。
网站链接:Zero Img Site
jQuery 的东西:
<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 内容:
<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>
最佳答案
您需要更改鼠标悬停函数中的 .block 选择器，以便它们仅作用于您鼠标悬停的元素。您可以使用关键字 this 来执行此操作。
$(".block").mouseover(function(){
$(this).animate( { backgroundColor: '#777777' }, 100)
});
$(".block").mouseout(function(){
$(this).animate( { backgroundColor: 'white' }, 200)
});
关于jquery - 使用 jquery、html 和 css 在菜单项上创建颜色淡化效果时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4069309/