文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jquery、html和css在菜单项上创建颜色淡出效果时遇到问题

问使用jquery、html和css在菜单项上创建颜色淡出效果时遇到问题
EN

Stack Overflow用户

提问于 2010-11-01 21:33:50

回答 1查看 287关注 0票数 0

对于傻笑，我正在创建一个图像免费，但互动的网站。在菜单上，我希望每个项目在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>

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-11-01 21:37:28

您需要更改mouseover函数中的.block选择器，以便它们只作用于您正在鼠标悬停的元素。您可以使用关键字this来执行此操作。

$(".block").mouseover(function(){
    $(this).animate( { backgroundColor: '#777777' }, 100)
});
$(".block").mouseout(function(){
    $(this).animate( { backgroundColor: 'white' }, 200)
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4069309

复制

相似问题

问使用jquery、html和css在菜单项上创建颜色淡出效果时遇到问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery、html和css在菜单项上创建颜色淡出效果时遇到问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jquery、html和css在菜单项上创建颜色淡出效果时遇到问题
EN