Question

我仍然是JS的新手，我正在尝试用正在被鼠标悬停的图片替换div的HTML，当鼠标离开时我希望它返回到它的正常状态。我认为我做的一切都正确，但我的代码似乎没有起作用。我查看了堆栈溢出，我看到了很多关于我的'问题的jQuery解决方案'，但我想在纯JavaScript中找到答案（我首先尝试“maser”），以及解释所以我可以理解为什么答案才是答案。感谢。

我会尝试解释自己（我的代码）。我抓住了图像持有人的参考，我抓住了对图像的参考。我以为我创建了一个循环遍历图像数组的函数，并为任何图像（图像[i]）被鼠标悬停添加了一个事件监听器。然后，我添加了一个事件监听器，它应该通过插入原始HTML将图像持有者返回到它的默认状态。我只是不明白如何解决这个问题。

var holder = document.getElementById('holder');
var images = document.getElementsByTagName('img');

var popImage = function () {
    for (i = 0; i < images.length; i++) {
        images[i].addEventListener('mouseover', = function () {
            holder.innerHTML = images[i];
        });
        images[i].addEventListener('mouseout', function () {
            holder.innerHTML = 
                '<div class='col-md-3 img-fluid' id='img1'><img src='photo1.jpg'></div>
                <div class='col-md-3 img-fluid' id='img2'><img src='photo2.jpg'></div>
                <div class='col-md-3 img-fluid' id='img3'><img src='photo3.2.jpg'></div>
                <div class='col-md-3 img-fluid' id='img4'><img src='photo4.jpg'></div>'
        });
    };
};

popImage();

Answer 1

你说你是JS的新手，只是学习哪些是好的，但学习JS的一个重要部分就是在不使用它时学习。正如@Yoda所说，如果这是用于制作，你真的应该使用CSS而不是JS。

这是使用纯CSS

完成此操作的一种方法

<style>
   .img {
      width: 100px;
      height: 100px;
      background: #bada55;
      border: 2px solid #333;
      float: left;
   }
   .holder:hover > .img {
      opacity: 0;
   }
   .holder:hover > .img:hover {
      opacity: 1;
   }
</style>

<div class="holder">
  <!-- Using div.img for simplicity, these whould be your <img/> tags -->
  <div class="img">1</div>
  <div class="img">2</div>
  <div class="img">3</div>
  <div class="img">4</div>
</div>

为了学习，这里是你在JS中的方式：

var holder = document.getElementById('holder');
var images = document.querySelectorAll('.img');
var filter = false;
function popImage () {
    // Use for (var i = 0 . . .
    // Instead of for (i = 0 . . .
    // Because without var, i will be stored in the global scope
    for (var i = 0; i < images.length; i++) {
        (function (_i) {
            images[_i].addEventListener('mouseover', function () {
                holder.innerHTML = '';
                // We can't set innerHTML to images[_i]
                // because it's a DomNode not a string
                holder.appendChild(images[_i]);
            });
        })(i);
    }
    holder.addEventListener('mouseout', function (e) {
        if (e.target !== holder)
          return;
          
        holder.innerHTML = '';
        // Again, use var j = 0 . . .
        for (var j = 0; j < images.length; j++) {
          holder.appendChild(images[j]);
        }
    });
}

popImage();

.img {
  width: 100px;
  height: 100px;
  background: #bada55;
  border: 2px solid #333;
  display: inline-block;
}
#holder {
position: relative;
  width: 100%;// So doesn't collape and trigger mouseout
  height: 100px;
  background: red;
  padding: 20px 0;
}

<div id="holder">
  <!-- Again, these would be your image tags -->
  <div class="img">1</div>
  <div class="img">2</div>
  <div class="img">3</div>
  <div class="img">4</div>
</div>

Answer 2

离开工作之前我有10分钟的时间，所以我对此有所了解，看看我会怎样做并给你一些想法。

这是我的实施（https://jsfiddle.net/hg7s1pyh/）

我想这里的主要内容是我将它分解成许多较小的部分，这使得解决问题变得更加容易，每种方法只关注做一件事。

您还会注意使用类来显示和隐藏内容而不是完全删除内容，这需要从这个功能中完成许多艰巨的工作。

＆＃13;

.image-box {
position: relative;
min-height: 400px;
width: 400px;
border: 1px solid #000;
text-align: center;
}
.image-box .placeholder {
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
width: 100%;
}
.image-box.previewing .placeholder {
display: none;
}
.image-box .image {
position: absolute;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.images {
margin-top: 10px;
}

＆＃13;

<div class="js-image-box image-box">
  <div class="placeholder">
Placeholder
  </div>
</div>
<div class="images">
  <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div>
  <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/150x150"></div>
  <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/400x400"></div>
  <div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div>
</div>

＆＃13;

SELECT  
    CUST.CODE, CUST.NAME,
    SUM (CASE 
            WHEN (INVI.DTTE > DATEADD(MONTH, DATEDIFF(MONTH, -1, GETDATE()) -1, -1))
               THEN INVI.AMMO 
            ELSE 0 
         END) AS VCURK
FROM    
    BAESQL_CO3.dbo.CUST CUST
LEFT OUTER JOIN 
    BAESQL_CO3.dbo.INVI INVI ON CUST.CODE = INVI.CSTC
WHERE 
    CUST.STAT = 'A' 
    AND (INVI.STAT = 'E' OR INVI.STAT = 'O')
GROUP BY 
    CUST.CODE, CUST.NAME
ORDER BY 
    CUST.CODE

＆＃13;

填充父div与正在悬停的图像

2 个答案: