悬停时闪烁的按钮

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