jquery鼠标点击事件,改变背景色
$(function(){
$(".managementPanel div").mouseover(function(){
$(this).css("background","#588600");
}).mouseout(function(){
$(this).css("background","none");
}).click(function(){
var menuText = $(this).text();
$("#menuName").html(menuText);
});
})
我需要通过div1被点击后改变其css样式(与mouseover时颜色一致)，点击div2后div1恢复原背景色，同时div2改变颜色。我这里鼠标点击跟鼠标经过有点冲突，点击后鼠标离开就恢复原背景色了,请问我该如何修改代码？
你的意思是不是：鼠标移动高亮显示div，点击div就选中当前div（单选），
完整代码如下：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标点击事件,改变背景色</title>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
//初始化div，并注册事件
var initDiv = function () {
$(".managementPanel div").css("background", "");
$(".managementPanel div").mouseover(function () {
$(this).css("background", "#588600");
})
.mouseout(function () {
$(this).css("background", "");
})
};
initDiv();
$(".managementPanel div")
.click(function () {
initDiv();
//当前被点击的div改变背景色
$(this).css("background", "#588600");
//取消当前div的mouseout和mouseover事件
$(this).unbind("mouseout");
$(this).unbind("mouseover");
});
})
</script>
</head>
<body>
<div class="managementPanel">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
</div>
</body>
</html>
效果图：
温馨提示：内容为网友见解，仅供参考
无其他回答
相似回答
