ホバーのちらつきボタン

Question

私はゴーファーに画像が結ばれています（リンクは下にあります）。ゴーファーの画像上にマウスを置くと画像が変わり、画像が変更されるとボタンとして表示されます。

しかし、私は、ボタンの上に行くしようとすると、それがちらつきを開始 - 私はそれはそれだけで私の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/ ありがとうございました。それでも私は何をここで起こるかもしれないことはときということですmousehover

Answer 1

申し訳ありませんがとしてあなたの機能上でpreventDefault（）を使用してみてくださいボタンを作成すると、代わりにマウスの代わりにボタンが移動しているので、マウスはもうdivを動かさないと考えます。次のいずれかを実行できます

• 使用jqueryのMouseEnterイベントとmouseleaveイベント（あなたはdivの境界を通過したときにのみトリガーする）
• それはdiv要素

Answer 2

に画像を変更するためのCSSを使用することをお勧めいたしますでしょう

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

：私の英語