1

クラス内で画像のハイライトを実行しようとしています。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を入力する必要があると思います...

4

1 に答える 1

0

css3 -webkit-filter：grayscale（100％）;を使用して、グレースケール画像用に「grayed」というcssクラスを作成します。不透明度：0.5の場合は「faded」と呼ばれるクラス。HTMLで、これら2つの新しいcssクラスを各画像に追加します

<img class="faded grayed" src="/layout/icons/icon-40x40.jpg" />
//add these 2 classes for the rest of the img tags as well

次に、head要素でjQueryをプルしていることを確認します

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

次に、document.ready内でjsを渡して、必要なアクションを追加します

$(document).ready(function(){
    //mouse over td to remove gray scale of inner images
    $("td.action").mouseover(function(){
        $(this).find("img").each(function(){
            $(this).removeClass("grayed");
        });
    });

    $("td.action").mouseout(function(){
        $(this).find("img").each(function(){
            $(this).addClass("grayed");
            $(this).addClass("faded");
        });
    });

    //js to remove grayscale from images on mouseover
    $("td.action>img").mouseover(function(){
        $(this).removeClass("faded");
    });
    $("td.action>img").mouseout(function(){
        $(this).addClass("faded");
    });

});

これは、jquery .hover（）関数でも実行できます。わかりやすくするために、マウスオーバーとマウスアウトに分けました。

于 2012-04-17T18:12:00.563 に答える