懸停時閃爍的按鈕

Question

我有一個由圖像組成的gofer（鏈接在下面），當我將鼠標懸停在gofer的圖像上時，必須更改圖像，並且當圖像更改時，它必須顯示為按鈕。

但是當我嘗試按下按鈕時，它開始閃爍-我不知道如何將其停留在圖像上時保持相同的狀態

我的js代碼是：

function resetHex() {
        jQuery('#img1').attr("src", "/themes/transformer/img/home/init/1.png");
        jQuery('#hex1').removeClass('cont-image1');
        jQuery('#hex1 a.text-image1').remove();
        jQuery('#hex1 a:last').remove();
}

$( document ).ready(function() {
    //change images, hover first
    jQuery('.hexagon-container #hex1')
        .mouseover(function(){
        jQuery('#hex1').addClass('cont-image1').append('<a id="ti1" class="text-image1" href="/contact-us">buton<a>');
        jQuery('#img1').attr("src", "/themes/transformer/img/home/set1/1.png");
        setTimeout(function() {
        jQuery('#img2').attr("src", "/themes/transformer/img/home/set1/2.png");
        }, 100);
        setTimeout(function() {
        jQuery('#img3').attr("src", "/themes/transformer/img/home/set1/3.png");
        }, 200);
        setTimeout(function() {
        jQuery('#img4').attr("src", "/themes/transformer/img/home/set1/4.png");
        }, 300);
        setTimeout(function() {
        jQuery('#img5').attr("src", "/themes/transformer/img/home/set1/5.png");
        }, 400);
        setTimeout(function() {
        jQuery('#img6').attr("src", "/themes/transformer/img/home/set1/6.png");
        }, 500);
        setTimeout(function() {
        jQuery('#img7').attr("src", "/themes/transformer/img/home/set1/7.png");
        }, 600);
    })
        .mouseout(function() {
            resetHex();
        });

我的CSS代碼：

.cont-image1 .text-image1{
    background: #fd5b08 none repeat scroll 0 0;
    border-radius: 5px;   
    color: #ffffff;
    font-family: Museo300;
    font-size: 13px; 
    padding: 4px 10px;
    position: absolute;
    text-transform: capitalize;
    z-index: 5;
    display: block;
}
.cont-image1 .text-image1{
    bottom: 40px;
    left: 35%;
}

http://lenspace.nexloc.com/謝謝。 對不起我的英語不好

Answer 1

嘗試在函數上使用preventDefault（），如下所示：

 .mouseover(function(e){
         e.preventDefault();
        jQuery('#hex1').addClass('cont-image1').append('<a id="ti1" class="text-image1" href="/contact-us">buton<a>');

我仍然建議您使用css在mousehover上更改圖像

Answer 2

這里可能發生的情況是，當您創建按鈕時，它認為鼠標不再懸停div了，因為它現在將鼠標懸停在div上。 您可以：

• 使用jquery mouseenter和mouseleave事件（僅當您通過div邊界時才應觸發）
• 檢測按鈕懸停並防止resetHex（如果將其懸停在div內）