CODEWITHSUNDEEP
javascriptjqueryfunctionjquery-hover
Marek123
Marek123

Reputation: 1211

JQuery - click and hover on same function

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.

Upvotes: 0

Views: 505

Answers (1)

Joe
Joe

Reputation: 15528

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

Upvotes: 2

Related Questions