CSS/javascript 类和图像颜色高亮答案

【问题标题】：CSS/javascript class and image colour highlightCSS/javascript 类和图像颜色高亮
【发布时间】：2012-04-29 01:29:22
【问题描述】：

我正在尝试在课程中突出显示图像。我有一个 td 框，其中为 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>

虽然这会改变 td 的背景颜色并且不会使图像变灰，但我认为这里必须使用 javascript...

【问题讨论】：

向我们展示你目前所拥有的。
如果你有你的代码示例和你尝试过的细节，你会得到更好的回应。
如果你能提供一个活生生的例子，甚至是一个 jsfiddle.net 的例子，它会更容易诊断和看到你在说什么

标签： javascript css hover onmouseover html-table

【解决方案1】：

使用 css3 -webkit-filter 为灰度图像创建一个名为“grayed”的 css 类：grayscale(100%);和一个名为'faded'的类，用于不透明度：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

然后确保你在你的 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() 函数来完成。为了清楚起见，我将其分为 mouseover 和 mouseout。

【讨论】：