jquery鼠标点击事件,改变背景色
$(function(){$(".managementPaneldiv").mouseover(function(){$(this).css("background","...
$(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改变颜色。我这里鼠标点击跟鼠标经过有点冲突，点击后鼠标离开就恢复原背景色了,请问我该如何修改代码？ 展开
$(".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改变颜色。我这里鼠标点击跟鼠标经过有点冲突，点击后鼠标离开就恢复原背景色了,请问我该如何修改代码？ 展开
1个回答
展开全部
你的意思是不是：鼠标移动高亮显示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>
效果图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
微测检测5.10
2023-05-10 广告
您好！建议咨 深圳市微测检测有限公司，已建立起十余个专业实验室，企业通过微测检测就可以获得一站式的测试与认 证解决方案；(EMC、RF、MFi、BQB、QI、USB、安全、锂电池、快充、汽车电子EMC、汽车手机互 联、语音通话质量），认证遇...
点击进入详情页
本回答由微测检测5.10提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
