我正在编写日历并从数据库中提取事件信息。然后，我正在做一些处理(服务器端)来尝试让冲突的“事件”DIV 在日历上合理地重叠。我将数据传回浏览器，jQuery 在其中定位“事件”DIV。
因为它们重叠，我想我会让 jQuery 在鼠标悬停时将每个 DIV 弹出到前面(通过更改其 CSS z-index 属性)，然后在鼠标移出时将其弹出。
这涉及到我第一次使用 jQuery 数据绑定(bind)，它工作正常，但有一个问题:当我将鼠标悬停在我的一个“事件”DIV 中的(简单文本)内容上时，jQuery 将其视为我正在使用鼠标脱离 DIV 本身。
我制作了另一个更简单的页面来测试 jQuery 的行为，在该页面中，鼠标悬停行为符合我的预期。
任何关于解决方法、我的代码问题或错误的想法都将不胜感激 - 谢谢!
页面代码如下:
<html>
<head>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
var minX = 200;
var minY = 200;
function renderEvent(id, content){
$('body').append('<div class="event" id="event_' + id + '">' + content + '</div>');
return true;
}
function positionEvent(id, startTime, endTime, x, ofs, w){
x += 30;
ofs = ofs - 1;
$('#event_' + id)
.position({
'my': 'left top',
'at': 'left top',
'of': '#time_' + startTime,
'offset': x + ' ' + ofs
})
.width(w)
.height(
((endTime - startTime) * 60) + (endTime - startTime - 2) - ofs
)
return true;
}
function bindEventData(id){
var zIndex = '9' + (1000 + id);
$('#event_' + id)
.css('z-index', zIndex)
.bind("mouseout", {z: zIndex}, function(e){
$(e.target)
.css('z-index', e.data.z);
//.css('-moz-box-shadow', 'none')
//.css('-webkit-box-shadow', 'none')
//.css('box-shadow', 'none');
});
return true;
}
function bindEventEvents(){
$('div.event').mouseover(function(e){
$(e.target)
.css('z-index', '9999999');
//.css('-moz-box-shadow', '0px 3px 3px #999')
//.css('-webkit-box-shadow', '0px 3px 3px #999')
//.css('box-shadow', '0px 3px 3px #999');
});
}
$(document).ready(
function(){
var json = [
{"id":0,"start_time":10,"end_time":16,"x":0,"ofs":0,"w":65,"content":"Event #0:<br />10:00 - 16:00"},
{"id":1,"start_time":10,"end_time":12,"x":26,"ofs":3,"w":65,"content":"Event #1:<br />10:00 - 12:00"},
{"id":2,"start_time":10,"end_time":15,"x":52,"ofs":6,"w":65,"content":"Event #2:<br />10:00 - 15:00"},
{"id":3,"start_time":13,"end_time":19,"x":0,"ofs":0,"w":65,"content":"Event #3:<br />13:00 - 19:00"},
{"id":4,"start_time":15,"end_time":18,"x":0,"ofs":0,"w":65,"content":"Event #4:<br />15:00 - 18:00"},
{"id":5,"start_time":16,"end_time":17,"x":0,"ofs":0,"w":65,"content":"Event #5:<br />16:00 - 17:00"},
{"id":6,"start_time":16,"end_time":19,"x":26,"ofs":3,"w":65,"content":"Event #6:<br />16:00 - 19:00"},
{"id":7,"start_time":17,"end_time":18,"x":0,"ofs":0,"w":65,"content":"Event #7:<br />17:00 - 18:00"}
];
if(json.length > 0){
for(i = 0; i < json.length; i++){
oEvent = json[i];
id = oEvent.id;
startTime = oEvent.start_time;
endTime = oEvent.end_time;
x = oEvent.x;
w = oEvent.w;
ofs = oEvent.ofs;
content = '<span class="event_text">' + oEvent.content + '</span>';
r = renderEvent(id, content);
r = positionEvent(id, startTime, endTime, x, ofs, w);
r = bindEventData(id);
}
bindEventEvents();
}
}
);
</script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.time_wrapper {
background-color: #ccf;
border-top: 1px solid #99c;
width: 180px;
min-height: 60px;
font-size: 0.65em;
}
.event {
background-color: #cfc;
border: 1px solid #6c6;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
width: 100px;
padding: 2px 1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="time_wrapper" id="time_9">09:00</div>
<div class="time_wrapper" id="time_10">10:00</div>
<div class="time_wrapper" id="time_11">11:00</div>
<div class="time_wrapper" id="time_12">12:00</div>
<div class="time_wrapper" id="time_13">13:00</div>
<div class="time_wrapper" id="time_14">14:00</div>
<div class="time_wrapper" id="time_15">15:00</div>
<div class="time_wrapper" id="time_16">16:00</div>
<div class="time_wrapper" id="time_17">17:00</div>
<div class="time_wrapper" id="time_18">18:00</div>
<div class="time_wrapper" id="time_19">19:00</div>
</div>
</body>
最佳答案
不确定为什么会发生您所看到的行为，但是，我将其修改为使用悬停而不是 mouseenter 和 mouseout 并且它有效。
function bindEventData(id){
var zIndex = '9' + (1000 + id);
$('#event_' + id)
.css('z-index', zIndex)
.hover(function(e){
$(this).css('z-index', '9999999');
},
function(e){
$(this).css('z-index', zIndex);
}
);
return true;
}
fiddle :http://jsfiddle.net/ZxWqD/2/
关于jquery - 将 jQuery 绑定(bind)到鼠标悬停事件；在鼠标悬停时设置 CSS 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5831377/