クラス内で画像のハイライトを実行しようとしています。CSSにクラスが割り当てられたtdボックスがあり、その中に3つの画像があります。私が達成しようとしているのは、画像をマウスオーバーイベントに反応させることです。マウスオーバーイベントがない場合、すべての画像がフェードアウトしてグレー表示されるようにしたいと思います。次に、tdボックスにカーソルを合わせると、灰色が削除され、画像はカラーになりますが、色あせます。次に、画像にカーソルを合わせると、色が復元されます。
単純なホバー設定を使用してCSSでそれぞれを個別に実行できましたが、2つを連携させることができません。これにはjavascriptが必要かもしれないと思います。
フィードバックは大歓迎です。ありがとうございました。
私がこれまでに持っているのは単純です:
.buttons .action img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.buttons .action:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.buttons .action:hover{
background-color: #f0f0f0;
}
<table class="buttons">
<tr>
<td class="action"><img src="/layout/icons/icon-40x40.jpg" /><img src="/layout/icons/icon2-40x40.jpg" /><img src="/layout/icons/icon3-40x40.jpg" /></td>
</tr>
</table>
これにより、tdの背景色が変更され、画像がグレー表示されなくなりますが、ここではjavascriptを入力する必要があると思います...