Search jQuery

jQuery Forum

Select one element only on .hover() function among other elements with same class

in Using jQuery • 8 years ago

Hi all, I'm very new to code and doing some practice on jQuery.

I'm trying to use jQuery (aware that @media query would be probably easier as CSS only solution) to have background images fade in and out on on selected words of a text with a .hover() event.

As all the images have the same CSS properties, they share the same class, and (obviously) jQuery doesn't make the distinction of which specific one to fade in/out, if not instructed to do so. Which is what I am struggling with.

Here the basic HTML structure. <p> has the CSS property display: inline; and I'm using <span> to select the desired words.

<div>
<p>Text text text text <span>SHOW IMAGE
<div class="bg">
<img src="image.jpg"/>
</div></span>
</p>
<p>other text other text <span>SHOW OTHER IMAGE
<div class="bg">
<img src="other-image.jpg"/>
</div></span>
</p>
</div>

The script is as follows. It works, but the result is that it shows always the last image on the HTML. I've tried out option with 'this', or $(this).siblings('.bg'), and even .find(), but none of them worked.

It's surely very simple, but can't figure it out ;)

Many thanks!

antonio

var main = function () {
$('span').hover(function() {
$('span').css('cursor','pointer');
$('.bg').fadeIn();
}, function(){
$('.bg').fadeOut();
});
}
$(document).ready(main);

Replies(11)

jay.blanc..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

You need to find the div that belongs to the span -

$(this).find('.bg').fadeIn();

and

$(this).find('.bg').fadeOut();

Antonio B..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Thanks Jay for your reply.

I had previously tried to find the div nested into the span, but it doesn't seem to work.

At the moment (for the sake of the exercise) I have only two span elements and two images. The first image doesn't fadeIn, the second does, but sometime it seems the script 'crashes' and starts looping the .hover event even if you only hover once.

I'm attaching the folder containing HTML, CSS and app.js, in case you have some minutes to look at it.

Many thanks again!

antonio

Attachments

290115 – Full bg image + justified to align-left (Java).zip
Size : 838.55 KB Downloads : 973 Download

jay.blanc..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

No one here will download and open your zip file (security after all). Can you setup an example online, perhaps using jsfiddle?

Antonio B..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Thanks Jay, fairly reasonable point!

I've set up a jsfiddle account. Here's the link, hope it works!

You will see, the code doesn't make probably much sense (I could achieve the same results in other ways, but I'm practicing with js).

Also, compared to my previous posts, the script has another function with a .resize() method I had previously worked on.

The behavior on jsfiddle is pretty much the same as described in my previous reply. The first image doesn't show and sometimes it seems the script 'crashes' (starts looping the .hover event even if you only hover once).

Again, thank you very much for your help,

jay.blanc..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

I made a small change - closing the span and not nesting the image within it. Then I used next(). See if that works for you.

Antonio B..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Hi Jay,

Is this what you mean? jsfiddle (Were I supposed to see your changes somewhere? Sorry, I am very new to all of this. Really new)

Somehow the first image still doesn't show.

Many thanks,

jakecigar

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Invalid HTML gives incorrect results.

In http://jsfiddle.net/jakecigar/7p9wdpgc/5/ I changed your <div>s to <i>.

A <div> may not be in a <p>, but an <i> is allowed.

JΛ̊KE

watusiware

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Your HTML was invalid. You cannot cross element tags the way you did. I tidied things up a bit, and removed the irrelevant bits (which you should always do when creating a demo).

But the real problem was your <p>, which I removed. I don't know what you intended.

http://jsfiddle.net/7p9wdpgc/6/

In the future, validate your HTML. Many good editors will do it for you as you type, or there are websites that will validate it.

The document structure is still super-awkward. I would never use a $('span') selector like that. Give those elements a CSS class.

Antonio B..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Hi Jake and watusiware,

thank you both for your help and great suggestions.

In my code there's very little intended, and much more improvised, which is why it all looks 'super-awkward'.

As said, I am very new to code. Really new. Embryonically new. I'm a print guy! I can print the encyclopedia britannica with no mistakes, from letterpress to digital print in zero time (…), but code,... nope. These are my very first steps.

Thanks both for your precious help and for your time!

antonio

jakecigar

Re: Select one element only on .hover() function among other elements with same class

8 years ago

Use The W3C Markup Validation Service to forewarn you of the horror known as "Invalid Markup".

At some point it may become second nature to you. But until then, validate.

JΛ̊KE

Antonio B..

Re: Select one element only on .hover() function among other elements with same class

8 years ago

thanks!

Top Reply

Response title

Attachments

jQuery Forum

Select one element only on .hover() function among other elements with same class

Replies(11)

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Attachments

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Re: Select one element only on .hover() function among other elements with same class

Statistics

Tags

Actions