Question

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

我尝试在从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>

Answer 1

您应该可以使用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");
}

Answer 2

你可以用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

Answer 3

你的问题是你已经对这些影响进行了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;   
}

如何追踪a：hover jquery源？

3 个答案: