如何追踪 a:hover jquery 源？答案

【问题标题】：How can I track down a:hover jquery source?如何追踪 a:hover jquery 源？
【发布时间】：2014-09-15 07:47:36
【问题描述】：

我想以白色显示一些页脚徽标。然后，在悬停时，它们会显示徽标的真实颜色。我已经在其他网站上实现了这一点，原始链接的背景被简单地替换为悬停背景。

我尝试在从 themeforest 购买的一些较新的主题上实现此功能，这让我相信一些较新版本的查询正在做一些奇怪的事情。在较新的网站上，新背景会向上滑动，或者从右下角滑动。以下是不良行为的示例：

http://idtools.org/id/grasshoppers/new/about.php

我试过一个一个删除 .js 文件和 .css 文件，都没有效果，甚至没有使用不同的 jquery 版本。我怎样才能弄清楚这个悬停动画的原因是什么？

链接到所需的徽标：

http://itp.lucidcentral.org/id/palms/palm-id/index.html

HTML

<div id="logos">
    <ul>
        <li id="usda"><a href="http://www.usda.gov"></a></li>
        <li id="uf"><a href="http://www.ufl.edu"></a></li>
        <li id="lucid"><a href="http://www.lucidcentral.com"></a></li>
    </ul>
</div>

【问题讨论】：

你为什么要使用 jquery？您只需使用 CSS 即可轻松完成。
你能举一个问题的例子吗，最好是在 jsFiddle 或类似的地方？
我想我没有很好地问这个问题。原始问题中的链接是一个工作示例。我确实在 css 中实现了上述网站的页脚徽标并得到了我想要的。然而，我在不同的网站上尝试了同样的事情，得到了一些奇怪的结果。这是一个链接到具有不需要的页脚徽标的站点。请查看页脚中的徽标和悬停动画idtools.org/id/grasshoppers/new/about.php

标签： javascript jquery html css hover

【解决方案1】：

您的问题是您对这些影响进行了 css 转换。查看 style.css 文件的第 67 行：

a, button, .owl-buttons div {
 -webkit-transition: all .1s ease-in-out;
 -moz-transition: all .1s ease-in-out;
 -o-transition: all .1s ease-in-out;
 transition: all .1s ease-in-out;   
}

【讨论】：

感谢您指出这一点。我将这些注释掉以进行验证。我很感激。为什么过渡对每个徽标的影响不同？就像第一个图像向上滑动，但在下一个它从右下角滑动？

【解决方案2】：

您应该可以改用 CSS。使用 :hover 伪类，您可以在用户将鼠标悬停在元素上时更改其外观。

li#usda:hover {
    background-image: url("/path/to/coloured/image");
}
li#uf:hover {
    background-image: url("/path/to/coloured/image");
}
li#lucid:hover {
    background-image: url("/path/to/coloured/image");
}

【讨论】：

【解决方案3】：

您可以使用 css 来完成，这里是一个工作示例的链接：

原帖：

Image Greyscale with CSS & re-color on mouse-over?

http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

“将以下 CSS 类添加到您的图像元素中：”

img.grayscale{ 
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);  /* For Webkit browsers */
    filter: gray;  /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
}

“悬停效果：”

img.grayscale:hover{ 
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;
}

工作 CodePen 示例：http://codepen.io/Cheesetoast/pen/sfCKa

【讨论】：