悬停时的类更改：CSS 与 jQuery（过渡故障）答案

【问题标题】：Class change on hover: CSS vs jQuery (transition glich)悬停时的类更改：CSS 与 jQuery（过渡故障）
【发布时间】：2015-07-20 06:25:12
【问题描述】：

我的网站是用多个块构建的，包含 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（我想要 transition）是：

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 的悬停动作。

问题是，当我将过渡添加到“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 过渡”冲突。但两者都没有工作。谁能帮帮我？

附：没有工作意味着没有悬停效果。悬停后的动作图像保持灰度。

【问题讨论】：

您在控制台中得到什么了吗？你能做一个 jsfiddle 或任何形式的现场演示吗？
moje-miedzygorze.pl/index.php，就是这样。尝试疯狂地悬停现场的所有元素，你应该能够看到故障。此外，在向下滚动时，当您将鼠标滚动到 div 上时，菜单会出现故障（我猜）。
它是非 jQuery 变体
为什么有两个转换（一个用于img.grey，一个用于.element:hover img.grey）？删除悬停的，看看它是否改变了什么？
不确定是否有帮助，但可能是一些宽度/高度问题，因为图像（或标题）适合容器，在过渡期间，标题似乎有一个非常轻微摇晃，玩弄它们的尺寸以进行测试，例如图像宽度 96% 而不是 100% ...

标签： javascript jquery html css

【解决方案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);
    }

否则我不明白你的问题。

【讨论】：