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>

}）;

部分有效。我忘了说我有其他div与项目和悬停类。如果我使用此代码，则会显示所有悬停div。我想立刻只在div上使用悬停效果。

由于

Answer 1

这是一种如何实现它的偷偷摸摸的方式。我使用<img>标记做了一个小技巧，因此div可以根据图片自动调整大小。

希望这有帮助！

＆＃13;

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

＆＃13;

.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;
  
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

.hover {
  display: none;
}

＆＃13;

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

＆＃13;

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

＆＃13;

用Jquery悬停在2张图片上

3 个答案: