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在鼠标悬停时更改图像

Answer 2

这里可能会发生的是，当您创建按钮时，它会认为鼠标不再悬停div，因为它现在会悬停按钮。你可以：

使用jquery mouseenter和mouseleave事件（只有在传递div界限时才会触发）
检测按钮悬停并阻止resetHex，如果它悬停在div内的按钮

悬停时闪烁的按钮

2 个答案: