Q:

CSS/javascript class and image colour highlight

I'm trying to perform the highlight of images within a class. I have a td box with a class assigned for CSS and within it three images, what I am trying to achieve is to get the images to react to a mouse over event. I would like that all the images are faded and greyed out when there is no mouse over event. Then when the td box is hovered the gray is removed so that the images are colour but faded. Then when an image is hovered the colour is restored.
I have managed to do each individually with CSS using a simple hover setting, but can't get the two to work together. I think this may need javascript.
Any feedback is welcome. Thank you. 
All I have so far is simply:
.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>

although this changes the background colour of the td and doesn't grey out the image, which is here I think javascript will have to come in...

A:

Create a css class called 'grayed' for grayscaled images using the css3 -webkit-filter: grayscale(100%);  and a class called 'faded' for opacity:0.5; In the html add these 2 new css classes to each of the images
<img class="faded grayed" src="/layout/icons/icon-40x40.jpg" />
//add these 2 classes for the rest of the img tags as well

Then make sure you are pulling jQuery in your head element 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Then, inside document.ready pass the js to add the required actions
$(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");
    });

});

This could ve been done with jquery .hover() function as well. I separated it to mouseover and mouseout for clarity.

