Question

我正在使用JQuery构建一个包含表格单元格的菜单。现在这个JQuery是一个测试，如果我离开第一个单元格并且我还没有进入第二个单元格，它应该仅警告“你好”。当我从第一个细胞进入第二个细胞时它仍然会发射。我发现在表的行之间有一个TINY空间，这导致JQuery认为我不在第二个单元格内。这是JQuery ......

$("#layer2_cell1").mouseenter(function() { 
$("#storage").data("2", "1");
});
$("#layer2_cell1").mouseleave(function() { 
$("#storage").data("2", "0");
});
$("#layer1_cell1").mouseenter(function() { 
$("#storage").data("1", "1");
});
$("#layer1_cell1").mouseleave(function() { 
$("#storage").data("1", "0");
var test1 = $("#storage").data("2");
if (!(test1 == "1")) {
alert("hello");
}
});

以下是一些HTML ...

<table align="center" cellspacing="0">
<tr>
<td class="leftend" background="images/box_background.jpg">
</td>
<div id="test">
<td id="layer1_cell1" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Airplanes</b></font>
</td>
</div>
<td id="layer1_cell3" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Cars</b></font>
</td>
<td id="layer1_cell4" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Cell Phones</b></font>
</td>
<td id="layer1_cell2" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Televisions</b></font>
</td>
<td id="layer1_cell5" class="layer1" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Other</b></font>
</td>
<td class="rightend" background="images/box_background.jpg">
</td>
</tr>
<tr>
<td id="permanentlyhiddencell" class="leftend">
</td>
<td id="layer2_cell1" class="bottomcell" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Cessna</b></font>
</td>
<td id="layer2_cell2" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Mercedes Benz</b></font>
</td>
<td id="layer2_cell3" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>LG</b></font>
</td>
<td id="layer2_cell4" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>LG</b></font>
</td>
<td id="layer2_cell5" class="layer2" background="images/box_background.jpg">
<font size="5" color="#01DFD7"><b>Balloons</b></font>
</td>
</tr>

和css ......

.layer1 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.layer2 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.bottomcell {
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.rightend {
border-top-right-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}
.leftend {
border-top-left-radius:15px;
border-bottom-left-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}
.layer1 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.layer2 {
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.bottomcell {
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 150px;
height:75px;
}
.rightend {
border-top-right-radius:15px;
border-bottom-right-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}
.leftend {
border-top-left-radius:15px;
border-bottom-left-radius:15px;
text-align:center;
border-style:solid;
border-color:#01DFD7;
border-style:solid;
border-width:2px;  
width: 30px;
height:75px;
}

如果有人能想出办法，我很乐意听到。谢谢！

Answer 1

“一张桌子不是一个菜单，所以不要将它作为一个菜单使用”是否有资格作为解决这个问题的方法？否则，您的表border-collapse: collapse;的CSS可能会成功。

Answer 2

经过非常漫长的调试过程，我发现我可以为此而努力。我只是用标签包围了我的所有行并给它一个ID。标签只包含未隐藏的标签，因此在JQuery中我只是创建了一个事件，如果光标离开，则会隐藏所有表格单元格。简单的解决方案。谢谢，没有人！

如何绕过表行之间的小空间？

2 个答案: