将jQuery绑定到mouseover事件；在鼠标悬停上设置CSS属性
我正在写日历，正在从数据库中提取事件信息。然后，我正在做一些处理（服务器端），试图使冲突的“事件”div在日历上合理地重叠。我将数据传递回浏览器，jQuery将“event”div放在浏览器中 因为它们重叠，我想我应该让jQuery在mouseover上将每个DIV放在前面（通过更改其cssz-index属性），然后在mouseout上将其放回 这涉及到我第一次使用jQuery数据绑定，它工作正常，但有一个问题：当我将鼠标移到一个“事件”DIV中的（简单文本）内容上时，jQuery将其视为从DIV中移出 我已经创建了另一个更简单的页面来测试jQuery的行为，在该页面中，mouseover行为正如我所期望的那样 任何关于解决方法、我的代码问题或bug的想法都将不胜感激-谢谢 以下是该页面的代码：将jQuery绑定到mouseover事件；在鼠标悬停上设置CSS属性,jquery,css,z-index,mouseover,Jquery,Css,Z Index,Mouseover,我正在写日历，正在从数据库中提取事件信息。然后，我正在做一些处理（服务器端），试图使冲突的“事件”div在日历上合理地重叠。我将数据传递回浏览器，jQuery将“event”div放在浏览器中 因为它们重叠，我想我应该让jQuery在mouseover上将每个DIV放在前面（通过更改其cssz-index属性），然后在mouseout上将其放回 这涉及到我第一次使用jQuery数据绑定，它工作正常，但有一个问题：当我将鼠标移到一个“事件”DIV中的（简单文本）内容上时，jQuery将其视为从DI
<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>
var-minX=200；
var minY=200；
功能呈现（id、内容）{
$（'body'）。追加（“”+内容+“”）；
返回true；
}
函数位置事件（id、开始时间、结束时间、x、ofs、w）{
x+=30；
ofs=ofs-1；
$（'#事件'+id）
.职位({
'我的'：'左上'，
'at'：'left top'，
“of”：“time”+startTime，
“偏移”：x+“”+ofs
})
.宽度（w）
.身高(
（（结束时间-开始时间）*60）+（结束时间-开始时间-2）-ofs
)
返回true；
}
函数bindEventData（id）{
变量zIndex='9'+（1000+id）；
$（'#事件'+id）
.css（'z-index'，zIndex）
.bind（“mouseout”，{z:zIndex}，函数（e）{
美元（e.target）
.css（'z-index'，e.data.z）；
//.css（'-moz-box-shadow'，无'）
//.css（'-webkit-box-shadow'，无'）
//.css（'box-shadow'，'none'）；
});
返回true；
}
函数bindEventEvents（）{
$（'div.event'）.mouseover（函数（e）{
美元（e.target）
.css（'z-index'，'999999'）；
//.css（'-moz-box-shadow'，'0px 3px 3px#999'）
//.css（'-webkit盒阴影''0px 3px 3px#999'）
//.css（'box-shadow'，'0px 3px 3px#999'）；
});
}
$（文件）。准备好了吗(
函数（）{
var json=[
{“id”：0，“开始时间”：10，“结束时间”：16，“x”：0，“ofs”：0，“w”：65，“内容”：“事件#0:
10:00-16:00”}，
{“id”：1，“开始时间”：10，“结束时间”：12，“x”：26，“ofs”：3，“w”：65，“内容”：“事件1:
10:00-12:00”，
{“id”：2，“开始时间”：10，“结束时间”：15，“x”：52，“ofs”：6，“w”：65，“内容”：“事件2:
10:00-15:00”，
{“id”：3，“开始时间”：13，“结束时间”：19，“x”：0，“ofs”：0，“w”：65，“内容”：“事件3:
13:00-19:00”，
{“id”：4，“开始时间”：15，“结束时间”：18，“x”：0，“ofs”：0，“w”：65，“内容”：“事件#4:
15:00-18:00”}，
{“id”：5，“开始时间”：16，“结束时间”：17，“x”：0，“ofs”：0，“w”：65，“内容”：“事件5:
16:00-17:00”，
{“id”：6，“开始时间”：16，“结束时间”：19，“x”：26，“ofs”：3，“w”：65，“内容”：“事件6:
16:00-19:00”，
{“id”：7，“开始时间”：17，“结束时间”：18，“x”：0，“ofs”：0，“w”：65，“内容”：“事件#7:
17:00-18:00”}
];
如果（json.length>0）{
for（i=0；i不确定您看到的行为发生的原因，但是，我将其修改为使用hover而不是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;
}