How can I track down a:hover jquery source?

Question

I want to display some footer logos in white. Then, on hover, they reveal the logos' true colors. I have implemented this on other websites and the background of the original link is simply replaced with the hover background.

I tried implementing this on some newer themes purchased from themeforest, which leads me to believe some newer version of query is doing something weird. On the newer sites, the new background will slide up, or from the bottom right corner. Here is an example of the undesired behavior:

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

I have tried removing .js files and .css files one by one and none had an effect, not even using different jquery versions. How can I figure out what is responsible for this hover animation?

link to desired logos:

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>

Why are you using jquery for this? You can easily do it using CSS only. — Steve Sanders, Jul 23 '14 at 22:31
Can you put up an example of the problem, ideally in jsFiddle or similar? — John_C, Jul 24 '14 at 09:46
I guess i did not ask this question very well. The link in the original question is a working example. And I did implement the above site's footer logos in css and got what I wanted. However, I tried the same thing on a different site, and got some weird results. Here is a link to a site that has the undesired footer logos. Please see the logos in the footer and the animation on hover http://idtools.org/id/grasshoppers/new/about.php — Brandon Dewey, Jul 24 '14 at 16:06

score 0 · Answer 1 · edited Jul 23 '14 at 23:50

0

You should be able to use CSS instead. With the :hover pseudoclass, you can alter an element's appearance when users hover over it.

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

edited Jul 23 '14 at 23:50

royhowie

11,075
14
50
67

answered Jul 23 '14 at 23:13

grammar

871
10
22

score 0 · Answer 2 · edited May 23 '17 at 11:57

You can do it with css and here is a link to a working example:

Original Posts:

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

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

"Add the following CSS class to your image elements:"

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

"The hover effect:"

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

Working CodePen Example: http://codepen.io/Cheesetoast/pen/sfCKa

score 0 · Accepted Answer · answered Jul 24 '14 at 18:19

0

Your problem is that you've got css transitions on these affects. Check out line 67 of your style.css file:

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

answered Jul 24 '14 at 18:19

John_C

1,116
8
17

thank you for pointing this out. I commented these out to verify. I appreciate it. Why does the transition affect each logo differently? Like for the first one the image slides up, but on the next it slides from the bottom right? – Brandon Dewey Jul 24 '14 at 18:48

How can I track down a:hover jquery source?

3 Answers3