Javascript jQuery fadeIn div show

我有三个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>

1以上
超过2
三岁以上

我试图构建一个jQuery脚本，当用户将鼠标箭头移动到1上方时，1.jpg淡入，然后当用户将鼠标箭头移动到2上方时，2.jpg出现，然后当用户将鼠标箭头移动到3上方时，3.jpg出现。但是，spot中只显示一个图像

下面的答案正确吗

<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>

$（'over1'）.mouseover（函数（）{$（'image1'）.fadeIn（1000）；}）；
$（'over1'）.mouseleave（function（）{$（'image1'）.fadeOut（1000）；}）；
$（'over2'）.mouseover（函数（）{$（'image2'）.fadeIn（1000）；}）；
$（'over2'）.mouseleave（function（）{$（'image2'）.fadeOut（1000）；}）；
$（'over3'）.mouseover（函数（）{$（'image3'）.fadeIn（1000）；}）；
$（'over3'）.mouseleave（function（）{$（'image3'）.fadeOut（1000）；}）；

或

---

下面的解决方案可以帮助您

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>

---

示例演示：

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

---

如果你想使用“点击”效果，你能把你的全部代码放进去吗？你可以简单地把“悬停”改为“点击”。

$('#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); }
);

<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>

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

});

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');
        });
});