问在鼠标悬停时jquery每次更改img
EN

Stack Overflow用户

提问于 2018-05-29 04:37:30

回答 1查看 48关注 0票数 0

大家好，我试着做一个动态产品的网站，我想使每个div的鼠标悬停改变img，这样它就会改变大图片下的1个小图片。然而，现在，一旦你把鼠标放在一张小图片上，所有的大图片都会改变(stortbillede)

所以我将在这里展示我的html模型：

<div id="test">
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
</div>

然后，我创建了一个小jquery，下面我将展示每个函数：

$('.produkt').find('.do_something').each(function() {

            $('.do_something').mouseenter(function() {

                var billedenavn = $(this).attr("src");

                $('img').parent('.produkt_hidden').parent('.produkt').children('img').attr('src', billedenavn);

            });

        });


    }

我希望我已经足够好地解释了我的问题，并得到了一些好的答案。

jquery

回答 1

Stack Overflow用户

发布于 2018-05-29 04:56:19

请参阅下面的代码可运行重构。图像不会显示，但您会看到它的闪烁

     $('.do_something').mouseenter(function() {

                var billedenavn = $(this).attr("src");

                $(this).parent('.produkt_hidden').parent('.produkt').children('img').attr('src', billedenavn);

            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
    <div class="produkt">
        <h2>overskrift</h2>
        <img class="stortbillede" src="image/20180509_122659.jpg">
        <div class="produkt_hidden">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque blanditiis cum, a velit accusantium autem possimus nulla praesentium consectetur eum non sed quae accusamus maxime et sunt modi repellat! Officiis.</p>


            <img class="lille_billede1 do_something" src="image/20180509_122710.jpg">
            <img class="lille_billede2 do_something" src="image/20180509_122219.jpg">
            <img class="lille_billede3 do_something" src="image/20180509_122548.jpg">


        </div>
    </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50573175

复制

相似问题

问在鼠标悬停时jquery每次更改img
EN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在鼠标悬停时jquery每次更改imgEN

回答 1

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在鼠标悬停时jquery每次更改img
EN