JQuery - click and hover on same function

Question

I have this jQuery script:

$('img[data-hover]').hover(function() {
    $(this)
        .attr('tmp', $(this).attr('src'))
        .attr('src', $(this).attr('data-hover'))
        .attr('data-hover', $(this).attr('tmp'))
        .removeAttr('tmp');
}).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));

});

It works fine, when I hove the images, the hover works fine.

But now I need to start the hover again, when I click on certain boxes, on those:

$('#first, #second, #third').click(function(){  .....

Is it somehow possible to start the hover "on click" and keep the actual hover function? Or even modify it to a "function"?

I've tried it but I failed.
Thanks.

EDIT:
here's the HTML code with the images:

<div class="auswahlbox">
        <div class="auswahl" id="first" data-id="1">
            <div class="bild">
                <img src="https://image.jpg" data-hover="https://images_hover.jpg" />
            </div>
            <div class="box">
                <p>Text</p>
            </div>
        </div>
        <div class="auswahl" id="second" data-id="2">
            <div class="bild">
                <img src="https://image.jpg" data-hover="https://images_hover.jpg" />
            </div>
            <div class="box">
                <p>Text</p>
            </div>
        </div>
        <div class="auswahl" id="third" data-id="3">
            <div class="bild">
                <img src="https://image.jpg" data-hover="https://images_hover.jpg" />
            </div>
            <div class="box">
                <p>Text</p>
            </div>
        </div>
    </div>

Situation now:
When I hove the images in .bild it works fine.

What I need:
When I click the "<div class="auswahl" id="first" data-id="1">" (second, third) div, the hover of the images shall "start" once.

"#first, #second, #third" means you have also 3 images? Or you want to activate the "hover" on all your images? — Roko C. Buljan
– Roko C. Buljan, Commented Apr 22, 2013 at 16:10

Joe · Accepted Answer · 2013-04-22 16:28:48Z

2

Do you mean something like this:

$('#first, #second, #third').click(function(){
    $('img[data-hover]').trigger('mouseover');
});

When #first, #second #third are clicked it triggers the hover event on img[data-hover].

To just trigger images in the same div try:

$('#first, #second, #third').click(function(){
    $(this).find('img[data-hover]').trigger('mouseover');
});

edited Apr 22, 2013 at 16:28

answered Apr 22, 2013 at 16:09

Joe

15.6k8 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marek123 Over a year ago

This is good. something like this. But what I forgot to mention is, that I need to start the hover on the same images as in the function before. I add the code in a few minutes.

Marek123 Over a year ago

yes, the hover itself works, but the trigger isn't. I got an another function that works in those boxes. pastebin.com/a2pJfsiu

Marek123 Over a year ago

yes, it works... very good indeed but on all pictures. Is it possible to trigger just the picture in the same "div" ?

Joe Over a year ago

I just added a variation of the click event which will only target the images within the clicked div.

Collectives™ on Stack Overflow

JQuery - click and hover on same function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related