Question

我的网格有问题。我在这个网格中有网格（Bootstrap）是一些图片，我想当有人将鼠标悬停在某个图片上时，图片会随着其他图片而改变。我尝试了一些功能但是没有用。这是我的网格：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">

            <img src="karta.png"/>
        </div>
        <div class="col-sm-4">
            <img src="karta.png"/>
        </div>

        <div class="col-sm-4">
            <img src="karta.png"/>
        </div>
    </div>
</div>

我想在mouseover的网格中用以下内容更改此图片：

<div id="page_effect" style="display:none;">


<img src="karta1.png"/>


<img src="karta1.png"/>


<img src="karta1.png"/>

 </div>

我尝试这样的事情，但不起作用：

$(document).ready(function(){
    $(".col-sm-4").mouseleave(function(){
        $("page_effect").attr()('src', 'karta1.png');
    });

    $(".col-sm-4").mouseover(function(){
        $("page_effect").attr("('src', 'karta1.png')");
    });
});

Answer 1

这是正确的方法：

$(document).ready(function(){
    $(".col-sm-4").mouseover(function(){
        $(this).find("img").attr('src', 'karta1.png');
    }).mouseleave(function(){
        $(this).find("img").attr('src', 'karta.png');
    });
});

DEMO

详细了解attr() here。

在鼠标悬停时更改网格Bootstrap中的图片

1 个答案: