悬停时闪烁的按钮

Question

I have a gofer formed with images (link is below) and I have to change images when I hover over an image of gofer, and when images are changed it has to appear as a button.

But when I try to go on button it starts to flicker - I don't know how to make it stay the same way when it's just hover on image

My js code is:

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

My CSS code:

.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/ Thank you. Sorry for my English

Answer 1

Try to use preventDefault() on your functions as:

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

Still I would recommend you to use css for changing images on mousehover

Answer 2

What might happen here is that when you create the button, it considers that the mouse does not hover the div anymore, because it now hovers the button instead. You can either:

• use jquery mouseenter and mouseleave events (should trigger only when you pass the div bounds)
• detect the button hover and prevent resetHex if it hovers the button inside the div