2011-02-06 7 views
3

子要素を上に置いたときに親要素を選択する方法を教えてください。例えば子要素を上に置いたときに親要素を選択するにはどうすればよいですか?

<table id="tb1"> 
<tr> 
<td id="td1">make table red</td> 
<td id="td2">make table yellow</td> 
</tr> 
</table> 

TD1は、IDまたはクラスタグのいずれかを使用してホバーしたときTB1を選択する方法はありますか?

+2

ハズレを、あなただけの子孫要素ではなく、彼らの祖先のいずれかを選択することができます。 – BoltClock

+2

http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child –

+0

サイドノートと同様に、あなたは 'id'または' class'タグを持っていません。タグの属性です。 – DigiKev

答えて

1

残念ながら、子要素がちょうどCSSを使用して推移したとき、親要素を選択することはできませんを行うことが機能してイベントを生成します。これは、カスケードスタイルシートでカスケードを無視します。ただし、JavaScriptやjQueryなどのライブラリのいずれかを使用すれば、これを簡単に実行できます。

次のjQueryを使用した場合は、あなたが探している結果を提供します:

http://jsfiddle.net/fSqSx/

+0

これを達成するためにjqueryとcssの組み合わせを使用しました。各セルには、その列に関連付けられたクラス名があります。私はCSSで行レベルの変更を行い、jqueryを使用して列のセルのクラス名を動的に変更します。その結果、列の上にマウスを置くと、セルがそのクラスを変更して色が変わります。それは素晴らしい作品です。ちょうどカーソルがセルから出てきたときに元の位置に戻り、うまく動作します。 – Middletone

0

テーブルのIDとTDは常に同じ名前ですか? TD上でホバリングと仮定すると、あなたが

function highlightTable(){ 
    var tableID=this.id.replace('td','tb'); 
    document.getElementById(tableID).style.backgroundColor='#c0c0c0'; 
} 
+0

スタイル、動作、マークアップは常に抽象化する必要があります。 JavaScriptを使用してインラインスタイルを追加するのは良いことではありません。 – DigiKev

関連する問題