當鼠標懸停在不同的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中的圖像？

回答

相關問題