JQuery -单击并悬停在同一函数上

JQuery - click and hover on same function

本文关键字：函数 悬停 单击 JQuery      更新时间：2023-09-26

我有这个jQuery脚本:

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

它工作得很好，当我放置图像时，悬停工作得很好。

但是现在我需要再次启动悬停，当我点击某些方框时，在这些

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

是否有可能启动悬停"点击"并保持实际悬停功能?或者甚至将其修改为"函数"?

我试过了，但是失败了。
谢谢。

编辑:
下面是带有图片的HTML代码:

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

情况:
当我把图片放到。bild中，效果很好。

我需要什么:
当我点击"<div class="auswahl" id="first" data-id="1">"(第二，第三)div时，图像的悬停将"开始"一次

你的意思是:

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

当点击#first, #second #third时，它会触发img[data-hover]上的悬停事件。

要在相同的div中触发图像，请尝试:

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