当鼠标悬停在不同的 div 上时更改 div 中的图像？答案

【问题标题】：Changing an image in a div when mouse hovers over a different div?当鼠标悬停在不同的 div 上时更改 div 中的图像？
【发布时间】：2019-07-26 07:22:11
【问题描述】：

我有四个 div，每个都显示文本。我也有一个图像的 div。我有 4 张图片，当我将鼠标悬停在相应的 div 上时，我希望显示相应的图片。所以，如果我将鼠标悬停在关于猴子的 div 上，那么图像 div 应该显示 monkey.jpg，如果我将鼠标悬停在 lion div 上，那么 lion.jpg 应该显示并且猴子图像应该消失。我对 jquery 没有太多经验，所以我还没有弄清楚。

HTML：

<div class="images">
<img src="monkey.jpg">
<img src="lion.jpg">
<img src="tree.jpg">
<img src="falcon.jpg">
</div>

<div>
<p>Monkey are funny!</p>
</div>
<div>
<p>Lions are cool!</p>
</div>
<div>    
<p>Trees are green!</p>
</div>
<div>
<p>Falcons are fast!<p>
</div>

我曾想过制作一个隐藏所有图像的函数，然后在我将鼠标悬停在 div 上时单独显示每个图像，但我认为这不会奏效。

【问题讨论】：

你卡在哪里了？如果您需要帮助，请展示一些工作。

标签： jquery html css

【解决方案1】：

这是一个简单的例子，不使用插件，只使用 javascript 和“onmouseover”事件...

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div > p {
                cursor: pointer;
            }
        </style>

        <script>
            var monkeySrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png";
            var lionSrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/lion-icon.png";
            var treeSrc = "http://totaltreeworks.co.nz/wp-content/uploads/2011/02/Tree-256x256.png";
            var falconSrc = "http://icons.iconarchive.com/icons/jonathan-rey/star-wars-vehicles/256/Millenium-Falcon-01-icon.png";

            function changeImage(src){
                document.getElementById("myImage").src = src;
            }

        </script>
    </head>

    <body>
        <div class="images">
            <img id="myImage" width="256" height="256">
        </div>

        <div>
            <p onmouseover="changeImage(monkeySrc)">Monkey are funny!</p>
        </div>

        <div>
            <p onmouseover="changeImage(lionSrc)">Lions are cool!</p>
        </div>

        <div>    
            <p onmouseover="changeImage(treeSrc)">Trees are green!</p>
        </div>

        <div>
            <p onmouseover="changeImage(falconSrc)">Falcons are fast!<p>
        </div>
    </body>
</html>

所以我使用了一些我自己的在线图片链接，只需将它们换成你自己的，你就可以开始了。

这基本上是您最初在答案底部提出的建议。

【讨论】：

【解决方案2】：

你也可以这样用，DEMO http://jsfiddle.net/yeyene/J8FJq/1/

添加目标属性和图像 url 链接，还添加类。下面的脚本将为您完成所有更改。

$('.imgLink').hover(function(){
    $('#preview').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
    $('#preview').css({'background':''});
});

【讨论】：

【解决方案3】：

使用 jquery 和 css：

CSS：

//图像 div { 背景图像：url（'你的图像.jpg'）；宽度：//图像宽度； height: // 图像高度； }

jquery：

$('.another-element').hover(function(){
    $('div').css({    'background-image': 'url('newimage.jpg')',
    'width': '// new image width',
    'height': '// new image height;'})
});

【讨论】：

【解决方案4】：

你可以使用.hoverjquery

演示http://jsfiddle.net/kevinPHPkevin/J8FJq/

$('#monkeys').hover(function(){
    $('#preview').addClass('monkeys');
},function(){
    $('#preview').removeClass('monkeys');
});

【讨论】：

【解决方案5】：

这是您想要的效果的完整实现。请注意链接的分组，它在识别哪个项目已被悬停（参见.index()）和CSS 样式中起作用，它只显示与.images 包装器的类匹配的图像。然后，悬停函数设置该类以反映已悬停的项目，从其名称的有序列表中提取，["monkey", "lion", ...]。

<div class="images">
    <img src="monkey.jpg">
    <img src="lion.jpg">
    <img src="tree.jpg">
    <img src="falcon.jpg">
</div>

<div class="links">
    <div>
        <p>Monkey are funny!</p>
    </div>
    <div>
        <p>Lions are cool!</p>
    </div>
    <div>    
        <p>Trees are green!</p>
    </div>
    <div>
        <p>Falcons are fast!<p>
    </div>
</div>

<style>
    .images img {
        display: none;
    }
    .images.monkey img[src*=monkey] {
        display: block;
    }
    .images.tree img[src*=tree] {
        display: block;
    }
    .images.lion img[src*=lion] {
        display: block;
    }
    .images.falcon img[src*=falcon] {
        display: block;
    }
</style>

<script>
    var images = ["monkey", "lion", "tree", "falcon"];
    $(".links div p").hover(function() {
        $(".images").attr("class", "images "+images[$(this).parents("div").index()]);
    }, function() {
        $(".images").attr("class", "images");
    });
</script>

【讨论】：