CODEWITHSUNDEEP
jquerycss
Bakajuice
Bakajuice

Reputation: 173

.Hover function isn't working

On my site I have multiple pictures, upon hovering on a picture jquery ought to make the image title visible via toggleClass + css, but no such luck. I'm pretty sure the problem lies in the jquery, but after numerous attempts tinkering with $this, switching .parents to .closest to .parentsUntil to etc, I've decided to seek assistance, please help I'll definitely appreciate it.

Here's a jsfiddle illustrating my the problem

Upvotes: 0

Views: 99

Answers (2)

matthias_h
matthias_h

Reputation: 11416

I've just fixed your Fiddle

There were some issues - jquery was not included, the class imghover was missing the closing }, and I've adjusted the jquery select to 

$(this).parents('div').find("h2").toggleClass('imghover');

As I noticed that in your Fiddle the class imghover ends with tr, it looks like not the complete css was copied into the original Fiddle. In first Fiddle above I've just removed this tr and added the missing } to close the class, so some of your intended css, e.g. transition, could be missing. With just adding a transition - as I'd guess that something like this was intended - the adjusted second Fiddle looks better. I also removed the var $this = $(this); as it's not needed anymore.

Upvotes: 4

Todd Mark
Todd Mark

Reputation: 1885

JSFiddle

Changed CSS

.imghover {
    opacity: 1;
    transform: translateY(50px);
    text-transform: uppercase;
    font-style: italic;
    transition: all 0.5s;
}

.imgtitle {
    opacity: 0;
    position: absolute;
    color: rgba(255, 255, 255, .8);
    width: 296px;
    background-color: rgba(75, 85, 90, .95);
    border: black solid 2px;
    padding: 1.5%% 0 1.5% 0;
    border-radius: 7.5px;
    text-shadow: 2px 2px 1px #000;
    pointer-events: none;
}

There are two points you need pay attention:

  1. if you use transform, use the transition can make the transform more fluently. In the case, I change the class .imghover.
  2. when your cursor hover the img, the panda will display. But when you hover the panda, the text will shake. So, I add an attribute pointer-events:none. The reason of shake is .imgtitle node is not a child of the img.

At last, when you hover the img, the transition is comfortable.

Upvotes: 1

Related Questions