Question

我正在尝试在课堂上执行图像的突出显示。我有一个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必须进来......

Answer 1

使用css3 -webkit-filter为灰度图像创建一个名为'grayed'的css类：灰度（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

然后确保你在头元素中拉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。

CSS / javascript类和图像颜色突出显示

1 个答案: