Как обойти небольшое пространство между рядами строк?

Я использую JQuery для создания меню с ячейками таблицы. Теперь этот JQuery - это тест, который должен только предупреждать «привет», если я покину 1-ю ячейку, и я не вошел во вторую ячейку. Он все еще срабатывает, когда я перехожу из первой ячейки во вторую ячейку. Я узнал, что между строками таблицы есть пространство 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; 
}

Если кто-то может придумать способ вокруг этого я хотел бы услышать это. Благодаря!

источник

2012-03-24 Allen Hundley

действительно сложно сказать без HTML или CSS-кода! Почему бы вам не поместить свой код в jsfiddle – Vimalnath

Будет ли «таблица не меню, поэтому не используйте ее как один», как способ обойти это? В противном случае CSS для вашей таблицы border-collapse: collapse;, вероятно, сделает трюк.

источник

2012-03-24 18:05:28 tvanfosson

Это не сделало ничего ... спасибо. –

@ AllenHundley - трудно узнать, не используя HTML/CSS, попробуйте сыграть с ячейкой, установив ее на 0. border-collapse * должен * сделать то же самое. Но всерьез, может быть, это лучший способ сделать это, чем таблицы ... вложенные неупорядоченные списки, возможно? – tvanfosson

Добавлен css и html. Это помогает? –

После ОЧЕНЬ длинного процесса отладки я понял, что могу нас за это. Я просто окружил все свои строки меткой и дал ей идентификатор. Тег только окружает теги, которые не скрыты, поэтому в JQuery я просто сделал событие, которое скрывает все ячейки таблицы, если курсор выходит из. ПРОСТОЕ решение. Спасибо за штуки!

источник

2012-03-29 23:53:39

Как обойти небольшое пространство между рядами строк?

ответ

Смежные вопросы