1

我有四个 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 时单独显示每个图像，但我认为这不会奏效。

4

5 回答 5

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>

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

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

于 2013-07-15T21:36:22.430 回答
1

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

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

$('.imgLink').hover(function(){
    $('#preview').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
    $('#preview').css({'background':''});
});
于 2013-07-16T05:03:36.333 回答
0

你可以使用.hoverjquery

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

$('#monkeys').hover(function(){
    $('#preview').addClass('monkeys');
},function(){
    $('#preview').removeClass('monkeys');
});
于 2013-07-15T20:42:51.397 回答
0

使用 jquery 和 css：

CSS：

//image div { background-image: url('your-image.jpg'); 宽度：//图像宽度；height: // 图像高度；}

查询：

$('.another-element').hover(function(){
    $('div').css({    'background-image': 'url('newimage.jpg')',
    'width': '// new image width',
    'height': '// new image height;'})
});
于 2013-07-15T20:36:09.017 回答
0

这是您想要的效果的完整实现。注意链接的分组，它在识别哪个项目被悬停（参见 参考资料.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>
于 2013-07-15T20:36:16.443 回答