Как обойти небольшое пространство между строками таблицы? - PullRequest
Новая
       21

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

0 голосов
/ 24 марта 2012

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

Если кто-нибудь может придумать способ обойти это, я бы хотел услышать это Спасибо!

Ответы [ 2 ]

1 голос
/ 24 марта 2012

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

0 голосов
/ 30 марта 2012

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

...