使用 Jquery 将鼠标悬停在 2 个图像上

Question

我正在尝试使用 Jquery 的悬停效果替换 2 张图像，但我遇到了问题。当我的鼠标仍在具有悬停效果的 div 中时，这 2 个图像正在闪烁。当鼠标还在 div 中时，我希望我的图像不闪烁。

我的 jquery 代码可能在某处有误（我是初学者）。

$(document).ready(function () { 

    $(".project").hover(function() {
        $(this).hide();
        $(this).next('div').show();
    }, function() {
        $(this).show();
        $(this).next('div').hide();
    });

});

.hover {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">
</div>

<div class="hover">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt="">
</div>

编辑：感谢您的回答。我试试这个解决方案：

$(document).ready(function () {  

$(".project").mouseover(function() {
    $('.hover').show();
    $('.project').hide();
});

$(".hover").mouseout(function() {
       $('.project').show();
    $('.hover').hide();
});

});

它部分有效。我忘了说我还有其他带有项目和悬停类的 div。如果我使用此代码，则会显示所有悬停 div。我想一次只在一个 div 上应用悬停效果。

谢谢

Answer 1

这里有一个偷偷摸摸的方法来实现它。我用<img> 标签做了一个小技巧，这样 div 可以根据图片自动调整大小。

希望这会有所帮助！

$(document).ready(function () { 

    $(".project").hover(function() {
        $(".project").css("background-image","url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg)");
      
    }, function() {
        $(".project").css("background-image", "url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg)");
     
    });

});

.project {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg");
  background-repeat: no-repeat;
  width: 300px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" style="visibility: hidden;" />
</div>

Answer 2

Look at below example

$(document).ready(function () { 
$(".project").mouseover(function() {
    $('.hover').show();
    $('.project').hide();
  });

  $(".hover").mouseout(function() {
    $('.project').show();
    $('.hover').hide();
  });
});

.hover {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">
</div>

<div class="hover">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt="">
</div>

Answer 3

$(document).ready(function() {

  $(".project").mouseover(function() {
    $(this).hide();
    $('.hover').show();
  });

  $(".hover").mouseout(function() {
    $(this).hide();
    $('.project').show();
  });

});

.hover {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt="">
</div>

<div class="hover">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt="">
</div>

$(".project").mouseover(function() {
    $(this).hide();
    $('.hover').show();
  });

  $(".hover").mouseout(function() {
    $(this).hide();
    $('.project').show();
  });