Question

请帮忙，我试图在鼠标悬停在另一个div中的图像上时更改一个div中的内容。我试图用这个： -

$(document).ready(function(){

// icons
$('#iconone img').mouseover(function(){
    $('#stop').css('display', 'inline-block');

});
$('#iconone img').mouseout(function(){
    $('#stop').css('display', 'inline-block');
});

// box 2
$('#icontwo img').mouseover(function(){
    $('#stop').css('display', 'none');
    $('#shop').css('display', 'inline-block');
});
$('#icontwo img').mouseout(function(){
    $('#stop').css('display', 'none');
    $('#shop').css('display', 'inline-block');
});

// box 3
$('#iconthree img').mouseover(function(){
    $('#stop').css('display', 'none');
    $('#shop').css('display', 'none');
    $('#select').css('display', 'inline-block');
});
$('#iconthree img').mouseout(function(){
   $('#stop').css('display', 'none');
    $('#shop').css('display', 'none');
    $('#select').css('display', 'inline-block');
});
});
</script>

如果有人可以提供帮助，我将非常感激！谢谢你们：D

Answer 1

您可能只想使用hover？ http://api.jquery.com/hover/

实施例： http://jsbin.com/kodiy/1/

var div1, div2;

div1 = $('.div1');

div2 = $('.div2');

div1.hover(function() {
  div2.hide();
}, function() {
  div2.show();
});

Answer 2

您可以执行以下操作： JSFiddle Demo

$("a").hover(

  function() {

    var $this =  $(this).data("content");
    var $content =  $('#content .content');

     $content.hide();
     $('.' + $this).fadeIn(300);

  }, function() {
     $content.hide();
  }

);

HTML：

    <a href="#" data-content="content1">icon1</a>
    <a href="#" data-content="content2">icon2</a>
    <a href="#" data-content="content3">icon3</a>

    <div id="content">
        <div class="content active content1">content1</div>
        <div class="content content2">content2</div>
        <div class="content content3">content3</div>
    </div>

CSS：

#content .content.active { display:block;}
#content .content { display:none;}

当在另一个地方悬停在另一个div上时，更改一个div的内容

2 个答案: