2

HTML/jQuery を使用してデータベースからアイテムのテーブルを表示しています。表の最後の列には、いくつかのアクション リンク (削除、編集など) があります。マウスを行の上に置いたときにのみこれらのリンクを表示したいので、テーブルを次のように設定します。

<table class="data" ...>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td class="actions>...</td>
    </tr>
</table>

そして私のCSSは次のようになります：

table.data td.actions { visibility: hidden; }
table.data tr:hover td.actions { visibility: visible; }

これは、最初に行の他の列にカーソルを合わせている限りうまく機能します。アクション列があるはずの場所にマウスを移動すると、表示されません。列が非表示になっているため、行のホバーイベントがトリガーされないと推測しています。どうすればこれを修正できますか?

例: http://jsfiddle.net/wB5KC/

4

2 に答える 2

2

私はもともとこの質問を削除しましたが、他の誰かがそれを有用だと思った場合に備えて、元に戻すと思いました。解決策は、セル内のdiv内のリンクを移動し、セルではなくdiv自体の表示を切り替えることでした。セルが常に表示されると、表示されるコンテンツがない場合でも、行のホバーイベントがトリガーされます。ホバーイベントがトリガーされると、コンテンツが表示されます。

于 2012-04-12T19:21:50.347 に答える
0

http://jsfiddle.net/wB5KC/5/

これに変更しただけです：

table.data td.actions {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}
table.data tr:hover td.actions {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1; 
}
于 2012-04-12T22:12:41.223 に答える