だから私はリンクをホバーしたときにドロップダウンメニューを作ろうとしています。リンクの下に表が表示されます。なぜうまくいかないのかわかりません。フィドルリンクをチェックしてください。
修正されたリンク http://jsfiddle.net/ThobiasN/Pt3db/
HTMLコードの例：
<a class='nav' href='#'>Hover me</a>
<table>
<tr>
<td class='dropdown'><p>Show me</p></td>
</tr>
</table>
Cssコード例：
td.dropdown
{
display:none;
}
a.nav:hover > table
{
display:block;
}
テーブルはリンクの子ではないためです。サイン>イン CSS は、「の直接の子」と同等です。
テーブルをリンクの中に入れてみてください。
<table>リンク要素への兄弟です。兄弟を操作するには + を使用します。
a.nav + table {
display: none;
}
a.nav:hover + table {
display: block;
}
最後に、それを実現するためにJavascriptコードを使用する必要があると思いますが、間違っているのは次のとおりです。
>simbolは直接の子供用ですdisplay: noneに設定するtabletd解決：
>これのシンボルを変更します：+次の要素を取得します<a class='nav' href='#'>Hover me</a>
<table>
<tr>
<td class='dropdown'><p>Show me</p></td>
</tr>
</table>
table{
display:none;
}
a.nav:hover + table{
display:block;
}
table（表形式のデータの表）これは適切な方法です、CSS :
a.nav + table tr td.dropdown
{
display:none;
}
a.nav:hover + table tr td.dropdown
{
display:block;
}
テーブルを非表示にして TD を表示しない場合は、同じ要素を非表示にして表示する必要があり、その逆も同様です。
または、TD、 CSSの代わりにテーブルを表示および非表示にします。
a.nav + table
{
display:none;
}
a.nav:hover + table
{
display:block;
}
+ は兄弟要素を指し、 > は直接の子を指します。
a.nav:hover > table は、テーブルが a.nav 内にある必要があることを意味します。まず第一に、ここでテーブルを使用しないでください。ul をより適切に使用して、a.nav 内に配置してください。
<a class='nav' href='#'>Hover me
<ul>
<li>Show me</li>
</ul>
</a>
cssフィドルの操作
どちらの方法でも機能するようですが、css ではありませんが、私が好む方法は次のとおりです。
$('.nav').hover(function () {
$('table').css('display', 'block');
});
table{
display:none;
}