文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在悬停时改变div中的局部图像

问在悬停时改变div中的局部图像
EN

Stack Overflow用户
提问于 2020-08-21 15:15:00
回答 2查看 117关注 0票数 0

我正在尝试创建一个产品卡，当您悬停在卡片上时，它将显示缩略图，如果您悬停在缩略图上，主图像将更改为缩略图的图像。我已经做到了这一点，但我现在的挑战是，当我有其他具有类似属性的卡片(考虑到它是一个电子商务网站)。每当我悬停在缩略图上时，两张卡片都会反应，而不是我在上面盘旋的那张牌。当我悬停在一张特定的缩略图上，在一张特定的卡片中，它只改变了该卡片的主图像，我怎么能拥有它呢？

HTML代码

代码语言：javascript
复制
<div class="display-area">
                <div class="row">
                    <div class="col-lg-2 col-md-2">
                        <a href="">
                            <div class="product">
                                <div class="image-area">
                                    <button class="fav"><i class="far fa-heart"></i></button>
                                    <button class="quick-view"><span>Quick View</span><i class="fa fa-eye"
                                            aria-hidden="true"></i>
                                    </button>
                                    <button class="compare"><i class="fas fa-balance-scale"></i></button>
                                    <img src="./assets/images/ladies.jpg" alt="" class="main-img">
                                    <div class="img-thumb thumb-1 active">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-2">
                                        <img src="./assets/images/men.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-3">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                </div>
                                <div class="details">
                                    <div class="ratings">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <div class="shop">
                                        The DMs
                                    </div>
                                    <div class="product-name">
                                        Oversized Cottom Blouse
                                    </div>
                                    <div class="price">
                                        P 250.00
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <a href="">
                            <div class="product">
                                <span class="new-tag">New</span>
                                <div class="image-area">
                                    <button class="fav"><i class="far fa-heart"></i></button>
                                    <button class="quick-view"><span>Quick View</span><i class="fa fa-eye"
                                            aria-hidden="true"></i>
                                    </button>
                                    <button class="compare"><i class="fas fa-balance-scale"></i></button>
                                    <img src="./assets/images/ladies.jpg" alt="" class="main-img">
                                    <div class="img-thumb thumb-1 active">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-2">
                                        <img src="./assets/images/men.jpg" alt="">
                                    </div>
                                    <div class="img-thumb thumb-3">
                                        <img src="./assets/images/ladies.jpg" alt="">
                                    </div>
                                </div>
                                <div class="details">
                                    <div class="ratings">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                    <div class="shop">
                                        The DMs
                                    </div>
                                    <div class="product-name">
                                        Oversized Cottom Blouse
                                    </div>
                                    <div class="price">
                                        P 250.00
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

JS代码

代码语言：javascript
复制
/* product hover */
const thumbs = document.querySelectorAll('.img-thumb');
const mainImg = document.querySelectorAll('.main-img');

thumbs.forEach(function(thumb) {
    thumb.addEventListener('mouseover', function() {
        for (let img = 0; img < mainImg.length; img++) {
            mainImg.forEach(function(image) {
                image.src = thumb.children[0].src;
            });
        }
        for (let i = 0; i < thumbs.length; i++) {
            thumbs[i].classList.remove("active");
        }
        thumb.classList.add("active");
    });
});
javascript
html
jquery
twitter-bootstrap
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-08-22 16:08:53

如果使用jQuery，我建议检查语法，看看jQuery是如何工作的，因为有很多无用的循环: jQuery对所有匹配的元素应用相同的规则。

Find()方法不循环地检索前一个元素的子元素。对于.active类，我首先将类移除到所有对象，然后将其添加到current中。

添加Css只是为了更好地展示代码片段。

​

代码语言：javascript
复制
$(document).ready(function () {
      /* product hover */
      const thumbs = $('.img-thumb');

      thumbs.on('mouseover', function () {
        var mainImg = $(this).siblings('.main-img');
        var current_img = $(this).find('img').attr('src');
        mainImg.attr('src', current_img);
        $('.img-thumb').removeClass("active");
        $(this).addClass("active");
      });
    });
代码语言：javascript
复制
.col-lg-2 {
  width: 30%;
}
.row {
display: flex;
}
.active {
  border: 3px solid red;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-area">
    <div class="row">
      <div class="col-lg-2 col-md-2">
        <a href="">
          <div class="product">
            <div class="image-area">
              <button class="fav"><i class="far fa-heart"></i></button>
              <button class="quick-view"><span>Quick View</span><i class="fa fa-eye" aria-hidden="true"></i>
              </button>
              <button class="compare"><i class="fas fa-balance-scale"></i></button>
              <img src="https://via.placeholder.com/80x40/ffff00/?text=image%20main" alt="" class="main-img">
              <div class="img-thumb thumb-1 active">
                <img src="https://via.placeholder.com/80x40/0000FF/?text=thumb-1" alt="">
              </div>
              <div class="img-thumb thumb-2">
                <img src="https://via.placeholder.com/80x40/FF0000/?text=thumb-2" alt="">
              </div>
              <div class="img-thumb thumb-3">
                <img src="https://via.placeholder.com/80x40/00ff00/?text=thumb-3" alt="">
              </div>
            </div>
            <div class="details">
              <div class="ratings">
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
              </div>
              <div class="shop">
                The DMs
              </div>
              <div class="product-name">
                Oversized Cottom Blouse
              </div>
              <div class="price">
                P 250.00
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="col-lg-2 col-md-2">
        <a href="">
          <div class="product">
            <span class="new-tag">New</span>
            <div class="image-area">
              <button class="fav"><i class="far fa-heart"></i></button>
              <button class="quick-view"><span>Quick View</span><i class="fa fa-eye" aria-hidden="true"></i>
              </button>
              <button class="compare"><i class="fas fa-balance-scale"></i></button>
              <img src="https://via.placeholder.com/80x40/ffff00/?text=image%20main" alt="" class="main-img">
              <div class="img-thumb thumb-1 active">
                <img src="https://via.placeholder.com/80x40/0000FF/?text=thumb-1" alt="">
              </div>
              <div class="img-thumb thumb-2">
                <img src="https://via.placeholder.com/80x40/FF0000/?text=thumb-2" alt="">
              </div>
              <div class="img-thumb thumb-3">
                <img src="https://via.placeholder.com/80x40/00ff00/?text=thumb-3" alt="">
              </div>
            </div>
            <div class="details">
              <div class="ratings">
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
                <i class="fa fa-star" aria-hidden="true"></i>
              </div>
              <div class="shop">
                The DMs
              </div>
              <div class="product-name">
                Oversized Cottom Blouse
              </div>
              <div class="price">
                P 250.00
              </div>
            </div>
          </div>
        </a>
      </div>
    </div>
  </div>

​

票数 1
EN

Stack Overflow用户

发布于 2020-08-21 16:06:07

在mouseover函数中，您正在DOM的所有..main img中循环。您应该像一棵树一样考虑它，并选择当前项的兄弟级..main img。

在我的示例中，我在循环中移动了变量的声明，

  • 使用$(这)引用最初请求的元素；
  • 使用.siblings()只匹配当前产品的项目。
代码语言：javascript
复制
/* product hover */
const thumbs = document.querySelectorAll('.img-thumb');

thumbs.forEach(function(thumb) {
    thumb.addEventListener('mouseover', function() {
        for (let img = 0; img < mainImg.length; img++) {
            var mainImg = $(this).siblings('.main-img');
            mainImg.forEach(function(image) {
                image.src = thumb.children[0].src;
            });
        }
        for (let i = 0; i < thumbs.length; i++) {
            thumbs[i].classList.remove("active");
        }
        thumb.classList.add("active");
    });
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63525519

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档