2012-03-24 3 views
0

JQueryを使用して、表のセルを含むメニューを作成しています。今、このJQueryは、私が第1のセルを離れると "hello"に警告し、第2のセルには入っていないというテストです。私は1番目のセルから2番目のセルに移動するとまだ起動します。私は、テーブルの行の間にTINYスペースがあり、JQueryが2番目のセルの内側にないと思うようになっていることが分かりました。誰でも方法を考えることができればここで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; 
} 

ですこの周りで私はそれを聞くのが大好きです。ありがとう!

+0

あなたのHTMLやCSSのコードの一部がなくても本当に分かりにくいです! なぜあなたはあなたのコードをjsfiddleに入れません – Vimalnath

答えて

1

「テーブルはメニューではないので、1つとして使用しないでください」ということは、これを回避する方法になりますか?さもなければ、あなたのテーブルborder-collapse: collapse;のためのCSSはおそらくトリックをするでしょう。

+0

それは何もしなかった...ありがとう。 –

+1

@AllenHundley - HTML/CSSなしで知るのは難しいですが、cellspacingで再生しようとすると0に設定してください。border-collapse *同じことをする必要があります。しかし、真剣に、これを行うより良い方法は、テーブルよりも...ネストされた順序付けられていないリストでしょうか? – tvanfosson

+0

cssとhtmlが追加されました。それは役に立ちますか? –

0

非常に長いデバッグプロセスの後、私はこれを私たちに教えてくれました。私は単にすべての行をタグで囲み、それにIDを付けました。タグはJQueryで隠されていないタグだけを囲みます。カーソルが外に出るとすべての表のセルを隠すイベントを作成しました。シンプルなソリューション。何もないみんなありがとう!

関連する問題