CSS/javascriptクラスと画像の色のハイライト

Question

私はクラス内の画像のハイライトを実行しようとしています。私は、CSSのために割り当てられたクラスのtdボックスを持っています.3つの画像の中で、私が達成しようとしているのは、画像をマウスのイベントに反応させることです。マウスオーバーイベントがない場合は、すべての画像がぼやけてグレー表示されることをお勧めします。次に、tdボックスをぶら下げたときに、グレーが取り除かれ、画像は色がだめになる。その後、画像が浮かび上がると、色が復元されます。

シンプルなホバー設定を使用してCSSを個別に処理することはできましたが、両者を連携させることはできません。私はこれが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をで来ているだろうと思いここにある画像を、グレー表示にしませんが..

Answer 1

css3 -webkit-filter：grayscale（100％）を使用して、グレースケール画像用に「グレー」と呼ばれるCSSクラスを作成します。不透明度のために「退色」と呼ばれるクラス：0.5; HTMLで

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

次に追加するJSを渡すdocument.readyの内側に、

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

そして、あなたの頭の要素にjQueryのを引いていることを確認してください画像のそれぞれにこれらの2つの新しいCSSクラスを追加必要なアクション

$(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（）関数でも実行できました。わかりやすくするために、mouseoverとmouseoutに分けました。