我的网站是由多个块构建的,这些块包含IMG、TITLE和TEXT,如下所示(它们分为3列):

<div class="element">
  <img class="responsive grey" src="img_src" />
  <article>
    <h1>title</h1>
    <p>text</p>
  </article>
</div>

“.grey”(我想要转换)的css是:
img.grey {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");

  /* here should go transition */

}

加上对div的操作:悬停是:
.element:hover img.grey {
  -webkit-filter: none;
  filter: none;

  /* here should go transition */

}

如你所见,将鼠标指向整个DIV应该只触发IMG的悬停动作。
问题是,当我将转换添加到“img.grey”和“.element:hover img.grey”时,因为我希望它平稳地改变,所以效果变得有点油腻。我想是因为“filter:none”和“transition:transition”选项都在colflict中。过滤没有同时过滤:)有时它会变得平滑,有时悬停后我得到白色背景,nvm。很多浮华的效果。
我尝试的是删除“.element:hover img.grey{}”,并简单地添加jQuery脚本来切换“.grey”类onmouseover/onmouseout(hover)。我在“$('element').hover()”函数中使用了标准的“toggleClass()”。
还有我在css-tricks.com上发现的东西:
$('.element').hover(
       function(){ $("img").removeClass('grey') },
       function(){ $("img").addClass('grey') }
)

我认为这有助于避免“过滤:无与过渡”的冲突。但两个都没用。有人能帮我吗?
P.S.不起作用意味着没有悬停效果。悬停后动作图像保持灰度。

最佳答案

您只想在图像悬停时进行转换吗?你可以试试这个-http://codepen.io/sergdenisov/pen/GJoyNz

img {
    width: 300px;
    height: 300px;
}

img#lena-desaturate {
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url(#greyscale);
    filter: grayscale(100%);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

    img#lena-desaturate:hover {
        -webkit-filter: grayscale(0);
        filter: none;
        filter: grayscale(0);
    }

否则我不明白你的问题。

10-05 20:44
查看更多