如何在鼠标悬停时更改图像？答案

【问题标题】：how to change images on mouse over?如何在鼠标悬停时更改图像？
【发布时间】：2016-08-05 08:54:05
【问题描述】：

我是 javascript 的新手，在鼠标悬停时更改图像时遇到问题。它必须通过添加和删除“当前”类分别更改鼠标悬停的图片。我曾尝试用 javascript 做到这一点，但什么也没发生。请提供任何帮助。谢谢。

<script>
  $('.images-hover').each(function () {
            var $product = $(this);
            var $thumbs = $product.find('.images-box');
            var $images = $thumbs.find('img');

            if ($images.length <= 1)
                return;

            var interval, timeout;

            var imageCallback = function () {
                var $current = $thumbs.find('img.current');
                var $next = $current.next();

                if ($next.index() < 0)
                    $next = $images.first();

                $current.removeClass('current');
                $next.addClass('current');
            };

            var setCurrent = function () {
                $images.removeClass('current');
                $images.first().addClass('current');
            };

            setCurrent();

            $product.hover(function () {
                timeout = setTimeout(function () {
                    imageCallback();
                    interval = setInterval(imageCallback, 2500);
                }, 200);
            }, function () {
                clearTimeout(timeout);
                clearInterval(interval);
                setCurrent();
            });
        });
</script>

.images-hover img {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
}

.images-hover img.current {
  opacity: 1;
  visibility: visible;
}

<div class="images-hover">
  <div class="images-box">
    <a href="#" >
      <img class="current" src="img/image1.jpg" alt=""/>
      <img src="img/image2.jpg" alt=""/>
      <img src="img/image3.jpg" alt=""/>
      <img src="img/image4.jpg" alt=""/>
    </a>
  </div>
</div>
<div class="images-hover">
  <div class="images-box">
    <a href="#" class="images-hover" >
      <img class="current" src="img/image5.jpg" alt=""/>
      <img src="img/image6.jpg" alt=""/>
      <img src="img/image7.jpg" alt=""/>
      <img src="img/image8.jpg" alt=""/>
    </a>
  </div>
</div>

【问题讨论】：

你能检查你的浏览器控制台是否有任何错误吗？
@LearningPhase Uncaught TypeError: $ is not a function
你是否包含 jquery 文件

标签： javascript image mouseover

【解决方案1】：

我在 sn-p 上更改了以下内容（现在可以使用）：

从js部分移除<script>标签
添加 jquery 引用

另请注意，您的脚本必须在呈现 html 元素后运行。您可以通过将脚本放在页面末尾或使用文档就绪事件来做到这一点。

$(function() {
  /* your script goes here, page html has been loaded */
});

  $('.images-hover').each(function () {
            var $product = $(this);
            var $thumbs = $product.find('.images-box');
            var $images = $thumbs.find('img');

            if ($images.length <= 1)
                return;

            var interval, timeout;

            var imageCallback = function () {
                var $current = $thumbs.find('img.current');
                var $next = $current.next();

                if ($next.index() < 0)
                    $next = $images.first();

                $current.removeClass('current');
                $next.addClass('current');
            };

            var setCurrent = function () {
                $images.removeClass('current');
                $images.first().addClass('current');
            };

            setCurrent();

            $product.hover(function () {
                timeout = setTimeout(function () {
                    imageCallback();
                    interval = setInterval(imageCallback, 2500);
                }, 200);
            }, function () {
                clearTimeout(timeout);
                clearInterval(interval);
                setCurrent();
            });
        });

.images-hover img {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear;
}

.images-hover img.current {
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images-hover">
  <div class="images-box">
    <a href="#" >
      <img class="current" src="img/image1.jpg" alt=""/>
      <img src="img/image2.jpg" alt=""/>
      <img src="img/image3.jpg" alt=""/>
      <img src="img/image4.jpg" alt=""/>
    </a>
  </div>
</div>
<div class="images-hover">
  <div class="images-box">
    <a href="#" class="images-hover" >
      <img class="current" src="img/image5.jpg" alt=""/>
      <img src="img/image6.jpg" alt=""/>
      <img src="img/image7.jpg" alt=""/>
      <img src="img/image8.jpg" alt=""/>
    </a>
  </div>
</div>

【讨论】：

您的答案已解决问题，但我还没有声望 +1。对不起。再次感谢。

【解决方案2】：

看来您正在使用 Jquery 方法。要使用 JQuery 更改图像，您可以使用：

$(document).ready(function(){
    $('.images-hover').each(function () {
        var $product = $(this);
        var $thumbs = $product.find('.images-box');
        var $images = $thumbs.find('img');

        if ($images.length <= 1)
            return;

        var interval, timeout;

        var imageCallback = function () {
            var $current = $thumbs.find('img.current');
            var $next = $current.next();

            if ($next.index() < 0)
                $next = $images.first();

            $current.removeClass('current');
            $next.addClass('current');
        };

        var setCurrent = function () {
            $images.removeClass('current');
            $images.first().addClass('current');
        };

        setCurrent();

        $product.hover(function () {
            timeout = setTimeout(function () {
                imageCallback();
                interval = setInterval(imageCallback, 2500);
            }, 200);
        }, function () {
            clearTimeout(timeout);
            clearInterval(interval);
            setCurrent();
        });
    });
});

但您需要先导入 jquery：

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

或者，如果您只想尝试使用 javascript，您可以检查 onmouseover 事件，简短的 tutorial is on w3schools about it.，但您需要更改函数，使其不使用 jquery 方法。

【讨论】：