Wie umgehen Sie den kleinen Zwischenraum zwischen den Tabellenzeilen?

Ich verwende JQuery, um ein Menü mit Tabellenzellen zu erstellen. Jetzt ist diese JQuery ein Test, der nur "Hallo" alarmieren sollte, wenn ich die 1. Zelle verlasse UND die zweite Zelle nicht betreten habe. Es feuert immer noch, wenn ich von der ersten Zelle in die zweite Zelle gehe. Ich fand heraus, dass zwischen den Zeilen der Tabelle ein TINY-Platz ist, der die JQuery zu der Annahme veranlasst, dass ich mich nicht in der zweiten Zelle befinde. Hier ist die JQuery ...Wie umgehen Sie den kleinen Zwischenraum zwischen den Tabellenzeilen?

$("#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"); 
} 
});

Hier einige der 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>

und die 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; 
}

Wenn jemand eine Möglichkeit denken kann darum würde ich es gerne hören. Vielen Dank!

Quelle

2012-03-24 Allen Hundley

wirklich schwer zu sagen, ohne Ihre HTML oder CSS Teil des Codes! warum steckst du deinen Code nicht in jsfiddle – Vimalnath

Wäre "ein Tisch kein Menü, also benutze ihn nicht als einen" als einen Weg um dies zu qualifizieren? Andernfalls würde CSS für Ihre Tabelle border-collapse: collapse; wahrscheinlich den Trick tun.

Quelle

2012-03-24 18:05:28 tvanfosson

Das hat nichts getan ... danke, obwohl. –

@AllenHundley - schwer zu wissen, ohne die HTML/CSS versuchen Sie spielen mit Zellenabstand, setzen Sie es auf 0. border-collapse * sollte * das gleiche tun. Aber im Ernst, es muss einen besseren Weg geben, dies zu tun als Tabellen ... vielleicht verschachtelte ungeordnete Listen? – tvanfosson

Hinzugefügt die CSS und HTML. Hilft das? –

Nach einem sehr langen Debugging-Prozess habe ich herausgefunden, dass ich uns dafür könnte. Ich umgab einfach alle meine Zeilen mit einem Tag und gab ihm eine ID. Das Tag umgibt nur Tags, die nicht versteckt sind, also habe ich in JQuery gerade ein Ereignis gemacht, das alle Tabellenzellen ausblendet, wenn der Cursor aus dem. Einfache Lösung. Danke für nichts Leute!

Quelle

2012-03-29 23:53:39

Wie umgehen Sie den kleinen Zwischenraum zwischen den Tabellenzeilen?

Antwort

Verwandte Themen