CSS/javascript класс и цвет выделения цвета

Question

Я пытаюсь выполнить выделение изображений внутри класса. У меня есть td box с классом, назначенным для CSS, и в нем три изображения, чего я пытаюсь добиться, - это заставить изображения реагировать на мышь на событие. Я бы хотел, чтобы все изображения были выцветшими и серыми, когда нет мыши над событием. Затем, когда поле 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> 

хотя это изменяет цвет фона и т.д не серый цвета изображения, которое здесь я думаю, Javascript должен будет прийти в .. .

Answer 1

Создайте класс css под названием «серый» для получения изображений в сером цвете с использованием фильтра css3 -webkit: оттенки серого (100%); и класс, называемый «увядший» для непрозрачности: 0,5; В 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 

Затем убедитесь, что вы тянете 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(). Я выделил его для мыши и мыши для ясности.