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

我有四个div，每个都显示文本。我也有一个图像的div。我有4张图片，当我将鼠标悬停在相应的div上时，我想要显示相应的图片。因此，如果我将鼠标悬停在有关猴子的div上，那么图像div应该显示monkey.jpg，如果我将鼠标悬停在狮子div上，那么应显示lion.jpg并且猴子图像应该消失。我没有太多的jquery经验，所以我没有想太多。当鼠标悬停在不同的div上时，更改div中的图像？

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每幅图像，但我不认为这会工作。

来源

2013-07-15 user2441391

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

使用jQuery和CSS：

CSS：

//图像的div { 背景图像：网址（ '你-image.jpg文件'）; width：//图像宽度; height：//图像高度; }

的Jquery：

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

来源

2013-07-15 20:36:09

这里是一个充分实现你想要的效果。请注意链接的分组，这些链接在识别哪个项目已被覆盖（参见.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>

来源

2013-07-15 20:36:16 matt3141

您可以使用jQuery的.hover

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

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

来源

2013-07-15 20:42:51 Vector

下面是使用无插件只是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>

所以我使用了一些我自己的链接在线图像，只是交换这些f或者你自己，你很好去。

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

来源

2013-07-15 21:36:22 Jeremy

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

与图像URL添加目标属性链接，还添加类。下面的脚本会为你做所有的改变。

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

来源

2013-07-16 05:03:36 yeyene

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

回答

相关问题