Question

我有三个div

<div id="over1"> Over 1 </div>
<div id="over2"> Over 2 </div>
<div id="over3"> Over 3 </div>

<div id="image1"><img src="1.jpg></div>
<div id="image2"><img src="2.jpg></div>
<div id="image3"><img src="3.jpg></div>

并且我正在尝试构建一个jQuery脚本，因此当用户将鼠标箭头移过over1然后1.jpg淡入然后当用户将鼠标箭头移过over2然后2.jpg出现然后当用户移动时鼠标箭头超过3然后3.jpg出现。但是，现场只出现一个图像。

以下是否正确？

<script  type="text/javascript">

$('over1').mouseover(  function() {  $('image1').fadeIn(1000);  }  );

$('over1').mouseleave(  function() {  $('image1').fadeOut(1000);  }  );

$('over2').mouseover(  function() {  $('image2').fadeIn(1000);  }  );

$('over2').mouseleave(  function() {  $('image2').fadeOut(1000);  }  );

$('over3').mouseover(  function() {  $('image3').fadeIn(1000);  }  );

$('over3').mouseleave(  function() {  $('image3').fadeOut(1000);  }  );

</script>

Answer 1

$('#over1').mouseover(
    function() { $('#image1').fadeIn(1000); }
);
$('#over1').mouseleave(
    function() { $('#image1').fadeOut(1000); }
);
$('#over2').mouseover(
    function(){ $('#image2').fadeIn(1000); }
);
$('#over2').mouseleave(
    function(){ $('#image2').fadeOut(1000); }
);
$('#over3').mouseover(
    function(){ $('#image3').fadeIn(1000); }
);
$('#over3').mouseleave(
    function(){ $('#image3').fadeOut(1000); }
);

OR

$('#over1').hover(
    function(){ $('#image1').fadeIn(1000); },
    function(){ $('#image1').fadeOut(1000); }
);
$('#over2').hover(
    function(){ $('#image2').fadeIn(1000); },
    function(){ $('#image2').fadeOut(1000); }
);
$('#over3').hover(
    function(){ $('#image2').fadeIn(1000); },
    function(){ $('#image2').fadeOut(1000); }
);

Answer 2

以下解决方案可以帮助您。

HTML代码

<div id="over1" class="myDivs"> Over 1 </div>
<div id="over2" class="myDivs"> Over 2 </div>
<div id="over3" class="myDivs"> Over 3 </div>

<div id="image1" class="myImg"><img src="https://cdn0.iconfinder.com/data/icons/feather/96/591276-arrow-right-16.png"> image 1 </div>
<div id="image2" class="myImg"><img src="https://cdn0.iconfinder.com/data/icons/feather/96/591276-arrow-right-16.png"> image 2 </div>
<div id="image3" class="myImg"><img src="https://cdn0.iconfinder.com/data/icons/feather/96/591276-arrow-right-16.png"> image 3 </div>

jQuery代码

$(document).ready(function() {
$('.myImg').hide();
$('.myDivs').on('hover',function() {
    $('.myImg').hide();
    var $$ = $(this),
        getId = $$.attr('id'),
        imageId = getId.substr(-1);
    $('#image'+imageId).fadeIn();
});

});

示例演示：http://jsfiddle.net/63khB/

Answer 3

我的解决方案是切换类（效率更高），然后使用CSS进行转换：

http://jsfiddle.net/thechrisjordan/ZzUWD/19/

var $targets = $('#targets').children();

$targets.each(function (idx, element) {
    $(this)  
        .on('mouseover', function () {
            $('#image' + (idx + 1)).removeClass('hidden').addClass('shown');
        })
        .on('mouseout', function () {
            $('#image' + (idx + 1)).removeClass('shown').addClass('hidden');
        });
});

jQuery fadeIn div show

3 个答案: