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();
});
精彩评论