懸停在Jquery的2張圖片上

我試圖用Jquery的懸停效果替換2張圖片，但我遇到了問題。當我的鼠標仍處於具有懸停效果的div中時，2張圖像閃爍。當鼠標仍在div中時，我想讓圖像不閃爍。懸停在Jquery的2張圖片上

我的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上的懸停效果。

感謝

來源

2017-08-04 Mokhona

你並不需要JavaScript的jQuery的也實現這一點，例如：https://stackoverflow.com/a/10888138/4108884 –

這裏是你如何實現它偷偷摸摸的。我用<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>

來源

2017-08-04 13:59:47

-1

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

來源

2017-08-04 14:05:40

您的代碼段是破損而無法工作 –

，請複製粘貼錯誤，已檢查，然後張貼在這裏 –

錯誤：{ 「消息」：「未捕獲的ReferenceError：未定義$」，「文件名」：「https://stacksnippets.net/js」，「LINENO」：13，「colno」：9 } –

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>

來源

2017-08-04 14:18:50

懸停在Jquery的2張圖片上

回答

相關問題