Question

当你将鼠标悬停或点击它时，我想制作一张黑白照片。它必须保持黑白，直到你悬停或点击另一张图片。这就是为什么我决定在类中使用类.in来添加一个类.select，以便图像可能变为黑白（使用灰度（100％））

它完全符合简单的目标：悬停在css中，但是当我使用jQuery的addClass（）时，似乎没有任何效果！为什么？什么是实现它的最佳方法？这是我添加图片的html：

以下是我的css样式：

这是我的剧本

@foreach (var image in Model.ProductImages)
    {
        <div class="in goal pic">
            <img src="~/Content/Images/apple.jpg" alt="test"/>
        </div>
    }

Answer 1

您要将等级selected添加到div而不是图像。要使其工作，您需要在CSS中更改您的选择器。

.selected img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
}

Answer 2

嗯1.选择器应为.in img，您还必须支持out事件。关于jquery https://api.jquery.com/hover/

的文档

$('.in img').hover(
  function() { $(this).addClass('selected') },
  function() { $(this).removeClass('selected') },
)

如何添加课程

2 个答案: