javascript - 悬停时类更改 : CSS vs jQuery (transition glich)

Question

我的网站是用多个 block 构建的，其中包含 IMG、TITLE + TEXT，如下所示(它们在 3 列中):

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

“.grey”(我想要使用transition)的 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:hover 的操作是:

.element:hover img.grey {
  -webkit-filter: none;
  filter: none;

  /* here should go transition */

}

如您所见，将鼠标指向整个 DIV 应该只触发 IMG 的悬停 Action 。

问题是，当我将过渡添加到“img.grey”和“.element:hover img.grey”时，因为我希望它平滑地改变，所以效果变得有点毛刺。我猜这是因为“filter: none”和“transition: transition_options;”有冲突。同时不使用过滤器进行过滤 :) 有时它会变得平滑，有时在悬停后我会得到白色背景，nvm。许多故障效果。

我尝试的是删除“.element:hover img.grey {}”并简单地添加将切换“.grey”类 onmouseover/onmouseout(悬停)的 jQuery 脚本。我在“$('element').hover()”函数中使用了标准的“toggleClass()”。

还有一些我在 css-tricks.com 上发现的:

$('.element').hover(
       function(){ $("img").removeClass('grey') },
       function(){ $("img").addClass('grey') }
)

我认为这会有所帮助，因为我正在避免“过滤器:无 VS 转换”冲突。但是两者都根本不起作用。谁能帮我解决这个问题？

附言没有工作意味着没有悬停效果。悬停 Action 图像保持灰度。

Answer 1

您只是想在图像悬停时进行过渡吗？然后你可以试试这个——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);
    }

否则我不明白你的问题。