你可以将“hover images”添加到HTML本身，然后在CSS中使用hover来显示/隐藏图像。优点是所有的图像都是从一开始就加载的，你不需要改变DOM。

.img-thumbnail {
  width: 100px;
  height: 100px;
  display: block;
}

.col-md-4 img:nth-child(2) {
  display: none;
}

.col-md-4:hover img:nth-child(2) {
  display: block;
}

.col-md-4:hover img:nth-child(1) {
  display: none;
}

<div class="row">
  <div class="col-md-4">
    <img src="https://via.placeholder.com/100/09f/fff.png" class="img-fluid img-thumbnail mb-4" alt="frozen">
    <img src="https://via.placeholder.com/100/07a/fff.png" class="img-fluid img-thumbnail mb-4" alt="ca1">
  </div>
  <div class="col-md-4">
    <img src="https://via.placeholder.com/100/09f/fff.png" class="img-fluid img-thumbnail mb-4" alt="frozen">
    <img src="https://via.placeholder.com/100/092/fff.png" class="img-fluid img-thumbnail mb-4" alt="cat2">
  </div>
  <div class="col-md-4">
    <img src="https://via.placeholder.com/100/09f/fff.png" class="img-fluid img-thumbnail mb-4" alt="frozen">
    <img src="https://via.placeholder.com/100/56a/fff.png" class="img-fluid img-thumbnail mb-4" alt="cat3">
  </div>
</div>

现在，我不知道图像对HTML的语义是否重要。如果不是，图像只是作为图标使用，你可以将所有的图像移动到CSS：

.col-md-4 {
  width: 100px;
  height: 100px;
  display: block;
  background-image: url('https://via.placeholder.com/100/09f/fff.png');
}

.col-md-4.cat1:hover {
  background-image: url('https://via.placeholder.com/100/07a/fff.png');
}

.col-md-4.cat2:hover {
  background-image: url('https://via.placeholder.com/100/092/fff.png');
}

.col-md-4.cat3:hover {
  background-image: url('https://via.placeholder.com/100/56a/fff.png');
}

<div class="row">
  <div class="col-md-4 cat1">cat1</div>
  <div class="col-md-4 cat2">cat2</div>
  <div class="col-md-4 cat3">cat3</div>
</div>

你好亲爱我修复你的代码根据你的要求。

<div class="row">
<div class="col-md-4">
    <img src="images/frozen.jpg"  class="img-fluid img-thumbnail mb-4" alt="a">
</div>
<div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="b">
</div>
<div class="col-md-4">
    <img src="images/frozen.jpg" class="img-fluid img-thumbnail mb-4" alt="c">
</div>

const orignalImage = ["images/frozen.jpg", "images/frozen.jpg", "images/frozen.jpg"];

   const imageSources = ["images/cat1.jpg", "images/cat1.jpg", ".images/cat1.jpg"];
                    
                    let images = document.querySelectorAll('.img-fluid.img-thumbnail');

                  
                    function changeImg(event, index) {
                    
                     event.target.src= imageSources[index];
                      
                        
                    }

                    function restoreImg(event, index) {
                      event.target.src= orignalImage[index];
                    }

                    
                    images.forEach(function(element,index) {
                      element.addEventListener('mouseout', e=>restoreImg(e, index));
                        element.addEventListener('mouseover', e=>changeImg(e, index));
                      
                      });