Question

我有这样的div结构： -

<div class="row margin-bottom-20">
    <div class="col-md-3 service-box-v1" id="div1">
        <div><a href="#"><img src="path" id="img1" /></a></div>
        <h2>abc</h2>
    </div>
    <div class="col-md-3 service-box-v1" id="div2">
        <div><a href="#"><img src="path" id="img2" /></a></div>
        <h2>def</h2>
    </div>
    <div class="col-md-3 service-box-v1" id="div3">
        <div><a href="#"><img src="path" id="img3" /></a></div>
        <h2>ghi</h2>
    </div>
    <div class="col-md-3 service-box-v1" id="div4">
        <div><a href="#"><img src="path" id="img5"></a></div>
        <h2>jkh</h2>
    </div>
</div>

在页面加载中我想将class active分配给div1并更改img1路径，当用户在div2上盘旋时，它的类变为活动状态，img2路径发生变化，div1活动类被删除，img1进入旧源。

我试过这个： -

 $("#div1").mouseover(function () {
        old_src = $("#img1").attr("src");
        $("#img1").attr("src", "path");
    }).mouseout(function () {
        $("#img1").attr("src", old_src);

    });

但在这种情况下，我必须为每个div做这个。我需要一个通用代码的建议，而不是单独为每个div做这个。

Answer 1

试试这个，它是一个可以添加其余代码的开始：

$(document).ready(function() {
    // Set first service box element active
    var firstElem = $('.service-box-v1:first-child');
    firstElem.addClass('active');

    // Change src image
    firstElem.find('img').attr('src', 'new_path');

    // Add hover event
    $('.service-box-v1').on('hover', function() {
        // Reset all active classes
        $('.service-box-v1').removeClass('active');

        // Add active class + change src image
        $(this).addClass('active');
        $(this).find('img').attr('src', 'new_path');
    });
});

jquery在div悬停上更改图像路径并使其类处于活动状态？

1 个答案: