Simple Jquery Display on MouseEnter Question

I am new to stackoverflow and Jquery so I would like to apologize for my inexperience/naivety in advance.

So essentially I am attempting to make a div appear when a button is in the mouseEnter state.

Here's my attempt at Jquery...

$('#main-button-btn-cart').bind('mouseenter', function() {
    var $select_button = $('#select-product-reminder');

  开发者_Python百科  $select_button.style.display = 'inline-block';
});

and the HTML is...

  <div id="select-product-reminder" style="width:200px; height:30px; background-color:#F00; display:none;">Please Choose an Item</div>
    <button type="button" id="main-button-btn-cart" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="productAddToCartForm.submit()">
      <?php echo $this->__('+ADD TO CART') ?>
    </button>

For some reason this code does not work. However, it may be useful to note that if I include an alert box in my bind function, the alert box does appear.

Thanks in advance for any input!

you could do this:

$('#main-button-btn-cart').bind('mouseenter', function() {
    $('#select-product-reminder').show();
});

also you can do this

$('#main-button-btn-cart').onmouseenter(function() {
    $('#select-product-reminder').show();
});

onmouseenter is a short cut instead of calling bind function

This should do the trick;

$('#main-button-btn-cart').mouseenter(function() {
    var $select_button = $('#select-product-reminder');
    $($select_button).css('display','inline-block');
});

Or you could do away with the var;

$('#main-button-btn-cart').mouseenter(function() {
    $('#select-product-reminder').css('display','inline-block');
});

Update for click;

$('#main-button-btn-cart').mouseenter(function() {
  $('#select-product-reminder').css('display','inline-block');
  $(this).click(function() {
    alert('You clicked the button');
  });
});

I would use something that look like this: $('#main-button-btn-cart').live('mouseenter',function() { $('#select-product-reminder').show();
});