Question

我有四个div，每个div都显示文本。我还有一个图像的div。我有4张图片，当我将鼠标悬停在相应的div上时，我希望显示相应的图像。所以，如果我将鼠标悬停在关于猴子的div上，那么图像div应该显示monkey.jpg，如果我将鼠标悬停在狮子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上时单独显示每张图片，但我认为这不会起作用。

Answer 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>

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

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

Answer 2

您也可以使用DEMO http://jsfiddle.net/yeyene/J8FJq/1/

添加带有图片网址的目标属性进行链接，同时添加类。以下脚本将为您完成所有更改。

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

Answer 3

使用jquery和css：

CSS：

// image div { background-image：url（'your-image.jpg'）; width：//图像宽度; height：//图像高度; }

Jquery的：

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

Answer 4

以下是您所需效果的完整实现。请注意链接的分组，这些链接在识别哪些项目已悬停（参见.index()）和CSS样式方面发挥作用，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>

Answer 5

您可以使用.hover jquery

DEMO http://jsfiddle.net/kevinPHPkevin/J8FJq/

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

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

5 个答案: