Javascript 悬停时的类更改：CSS vs jQuery（转换glich）

我的网站是由多个块构建的，其中包含IMG、TITLE和TEXT，如下所示（它们分为3列）：

正如你们所看到的，将鼠标指向整个DIV应该只触发IMG的悬停动作

问题是，当我将过渡添加到“img.grey”和“.element:hover img.grey”时，因为我希望它平滑地改变，所以效果变得有点油滑。我猜这是因为“过滤器：无”和“转换：转换选项”在colflict中。过滤器与没有过滤器在同一时间：）有时它会变得平滑，有时在悬停后我得到白色背景，nvm。许多故障效应

我尝试的是删除“.element:hover img.grey{}”，然后简单地添加jQuery脚本，在mouseover/onmouseout（hover）上切换“.grey”类。我在“$（'element'）.hover（）函数中使用了标准的“toggleClass（）”

还有我在css-tricks.com上找到的东西：

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

我认为这有助于避免“过滤：无VS转换”冲突。但这两个都不起作用。有人能帮我吗

---

p.S.不起作用意味着没有悬停效应。悬停后的动作图像保持灰度。

您只是想在图像悬停时进行转换吗？那么你可以试试这个-

---

否则我不理解您的问题。

您在控制台中找到什么了吗？你能制作一个JSFIDLE或任何形式的现场演示吗？下面是它的内容。尝试疯狂地将所有元素悬停在站点上，您应该能够看到故障。另外，在向下滚动时，当你将鼠标滚动到divs上时，菜单会变得模糊（我猜）。这是无jQuery变量。为什么你有两个转换（一个用于

img.grey

，另一个用于

.element:hover img.grey

）？移除悬停图标，看看它是否会改变什么？不确定是否会有帮助，但可能是宽度/高度的问题，因为图像（或标题）适合容器，在转换过程中，标题似乎有一个非常轻微的抖动，围绕它们的尺寸进行测试，比如图像宽度96%，而不是100%。。。

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 */

}

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

  /* here should go transition */

}

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

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);
    }