1

ホバー時に強調表示する必要がある各行にリンクを含むテーブルがあります(tr bgcolorとリンクの両方)。次のコードを使用してJavaScriptでこれを行うことができます：

<style type="text/css">
<!--
.style1 a:link, .style2 a:visited {
   color: black;
   text-decoration: none;
}
-->
</style>

<table class="style1" width=50%>
<tr     onMouseOver="document.getElementById('test').style.color='white'; this.style.backgroundColor='blue';"
    onMouseOut="document.getElementById('test').style.color='black'; this.style.backgroundColor='transparent';"
    onClick="location.href='foo.html'">
            <td><a href="foo.html"><span id="test">link lala</span></a></td>
</tr>
</table>

しかし、私はcssでそれをやりたいです。

私は次のことを試しました：

<style type="text/css">
<!--
.style2 tr:hover {
    background-color: blue;
}
.style2 {
    color: black;
}
.style2 a:link, .style2 a:visited {
    color: black;
    text-decoration: none;
}
.style2 a:hover {
    color: white;
}
-->
</style>

<table class="style2" width=50%>
   <tr>
      <td><a href="foo.html">link lala</a></td>
   </tr>
</table>

ただし、リンクのホバーは、マウスがリンクの上にある場合にのみ機能します（tr全体の上ではありません）。実際のリンクをクリックすることによってのみ機能するリンクにも問題があります (tr 行全体ではありません)。

これは、css (少なくとも同時ホバー) のみを使用して実行できると確信しています。少し手伝ってくれませんか？

ありがとうございました

4

4 に答える 4

4

私が正しく理解していれば、これで問題が解決します：

.style2 tr:hover {
    background-color: blue;
}
.style2 tr:hover a {
    color: white;
    text-decoration: none;
}

結果は次のとおりです。http://jsfiddle.net/56M4U/1/

于 2013-01-11T11:15:28.030 に答える
1

要素はaインライン要素です。これは、コンテンツを収めるのに十分なスペースしか占有しないことを意味します。そのため、ホバーはマウスがこれを超えたときにのみトリガーされます。

次のcssを追加してブロックレベルの要素に変更することで、aタグがで使用可能なすべてのスペースを使用するように、この動作を変更できます。td

.style2 a{ 
   display:block;
}

これにより、最小限の手間で必要な結果が得られます。

注：これにより、は要素a内のすべてのスペースのみを使用しtdます。td列が行の唯一の列である場合、これは期待どおりに機能しますが、さらに列を追加すると、その場合、この特定の列のみがリンクをトリガーします。

于 2013-01-11T11:18:23.913 に答える
0

はい、できますが、<a>タグ付けするクラスを指定する必要があります。

その後、 css を書くことができます：

.style2 tr:hover {
    background-color: blue;
}
.style2 tr:hover a.a_link {
    color: white;
}

その後

<table class="style2" width=50%>
   <tr>
      <td><a class="a_link" href="foo.html">link lala</a></td>
   </tr>
</table>
于 2013-01-11T11:33:50.507 に答える
0

これを試して：

a {
   display:block
}

これにより<a>、完全に表示され<td>、ホバーすると色が変わるだけでなく<td>、全体をクリックする<td>とアンカー（ボタンのようなもの）になります。

于 2013-01-11T11:15:37.683 に答える