Изменение изображения в div при наведении курсора мыши на другой div?

У меня есть четыре divs, каждый из которых отображает текст. У меня также есть 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 { фоновое изображение: URL ('ваш-image.jpg'); ширина: // ширина изображения; высота: // высота изображения; }

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, которые показывают только изображение, соответствующее классу обертки .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

Вы можете использовать .hover JQuery

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?

ответ

Смежные вопросы