[英]jQuery rollover and css :hover
我正在尝试在Jquery中制作一个简单的导航栏。 我想让文本在悬停时以及在单击文本以保持悬停颜色时更改颜色。 确实很简单,我已经在css中使用hover做到了这一点,然后在JQuery中使用了on click函数。 问题是,在单击导航栏的任何一项之前,一切正常。 单击导航栏项目后,:hover不再起作用? 我对CSS非常满意,但对jQuery非常陌生。 我希望这不是一个愚蠢的问题,但是在过去的2个小时中,我尝试使用各种jQuery代码修复此问题! 代码变得更长,我解决了1个问题,但又创建了另一个! 如果您检查JSFiddle,您会注意到,直到单击一次,翻转才起作用! 我希望:hover继续在2个未单击的链接上工作! 这是JSFiddle
非常感谢您的帮助。
代码如下:
<!DOCTYPE html>
<head>
<title>Help!</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#wedding-tips, #general-tips, #travel-tips{ cursor: pointer;}
#wedding-tips:hover, #general-tips:hover, #travel-tips:hover{color: #bc2021;}
</style>
<script>
$(document).ready(function(){
$("#wedding-tips-container, #travel-tips-container").hide();
$("#general-tips").click(function(){
$("#wedding-tips-container,#travel-tips-container").hide('slow');
$("#general-tips-container").show('slow');
$("#general-tips").css("color","#bc2021");
$("#wedding-tips,#travel-tips").css("color","#000");
});
$("#wedding-tips").click(function(){
$("#general-tips-container,#travel-tips-container").hide('slow');
$("#wedding-tips-container").show('slow');
$("#wedding-tips").css("color","#bc2021");
$("#general-tips,#travel-tips").css("color","#000");
});
$("#travel-tips").click(function(){
$("#general-tips-container,#wedding-tips-container").hide('slow');
$("#travel-tips-container").show('slow');
$("#travel-tips").css("color","#bc2021");
$("#wedding-tips,#general-tips").css("color","#000");
});
});
</script>
</head>
<body>
<div id="content-selector-div">
<div id="general-tips">General Photography Tips</div>
<div id="wedding-tips">Wedding Photography Tips</div>
<div id="travel-tips">Travel Photography Tips</div>
</div><br />
<div id="general-tips-container">
<p>General Tips Here</p>
</div>
<div id="wedding-tips-container">
<p>Wedding Tips Here</p>
</div>
<div id="travel-tips-container">
<p>Travel Tips Here</p>
</div>
</body>
</html>
它不起作用的原因非常简单:当您在元素上“手动”设置颜色时,它的“优先级”高于悬停颜色,并且将始终存在:
$("#wedding-tips,#travel-tips").css("color","#000"); --> problem
创建自己的类(我们称其为“当前”类),然后在用户单击导航时添加/删除-> http://jsfiddle.net/dmJ8p/
使用jQuery的addClass和removeClass功能
$(document).ready(function () {
$("#wedding-tips-container, #travel-tips-container").hide();
$("#general-tips").click(function () {
$("#wedding-tips-container,#travel-tips-container").hide('slow');
$("#general-tips-container").show('slow');
$("#general-tips").addClass("active");
$("#wedding-tips,#travel-tips").removeClass("active");
});
$("#wedding-tips").click(function () {
$("#general-tips-container,#travel-tips-container").hide('slow');
$("#wedding-tips-container").show('slow');
$("#wedding-tips").addClass("active");
$("#general-tips,#travel-tips").removeClass("active");
});
$("#travel-tips").click(function () {
$("#general-tips-container,#wedding-tips-container").hide('slow');
$("#travel-tips-container").show('slow');
$("#travel-tips").addClass("active");
$("#wedding-tips,#general-tips").removeClass("active");
});
});
参见代码更少的新提琴http://jsfiddle.net/KAxmS/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.