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');

    $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!

Answer 1

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