Question

I would like to show the following button on hover and remove it when the user mouses away. Here is the code I have so far:

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

Answer 1

What your function is doing is triggering the hover event for ‘div.service-item’ (i.e. doing nothing) and then toggling it (probably removing it). You want to do this:

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

However, it would probably be better to just do this with css. Just always have that html in the div, hidden, and display it on :hover.