1

我正在尝试在课程中突出显示图像。我有一个 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 将不得不出现在这里......

4

1 回答 1

0

使用 css3 -webkit-filter: grayscale(100%); 为灰度图像创建一个名为“grayed”的 css 类 和一个名为'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() 函数来完成。为了清楚起见，我将其分为鼠标悬停和鼠标悬停。

于 2012-04-17T18:12:00.563 回答