div要素をjQueryでマウスで操作すると、このhtmlをどのように切り替えることができますか？

Question

次のボタンをホバーに表示し、ユーザーがマウスを離したときに削除します。ここでのコードは、私がこれまで持っている：

<script> 
$(document).ready(function()) { 
$('div.service-item').hover().toggle().html('<br /><a href='order/products' class='button'>Get Started</a>'); 
} 
</script> 

Answer 1

何あなたの関数は（つまり、何もしない）「div.service項目」のホバーイベントをトリガしているやっていると、それをトグル（おそらくそれを削除）します。あなたはこれをしたい：

$("div.service-item").hover(function() { 
     $(this).html("<br /><a href='order/products' class='button'>Get Started</a>"); 
    }, 
    function() { 
     $(this).html(""); 
    } 
); 

しかし、これはおそらくちょうどcssでこれを行うことをお勧めします。 div内にそのhtmlを常に表示しておき、:hoverに表示してください。

Answer 2

を参照してくださいjQuery API for .hover()

$('div.service-item').hover(function() { 
    // Hover in 
}, function() { 
    // Hover out 
}); 

Answer 3

<script> 
$(document).ready(function()) { 
    $('div.service-item').bind("mouseenter", function(){ 
     $(this).toggle().html('<br /><a href="order/products" class="button">Get Started</a>'); 
    }); 
} 
</script> 

また、リンクに誤字があります。