MouseEnterでの単純なJqueryの表示質問

Question

私はstackoverflowとJqueryを初めて使用していますので、前もって不慣れであることをお詫びしたいと思います。

本質的に、ボタンがmouseEnter状態にあるときにdivを表示しようとしています。このコードは動作しません何らかの理由で

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

...

はここでのjQueryで私の試み...

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

    $select_button.style.display = 'inline-block'; 
}); 

だとHTMLです。しかし、私のバインド機能に警告ボックスを含めると、警告ボックスが表示されることに注意することは有益かもしれません。

事前にお問い合わせいただきありがとうございます！

Answer 1

これはトリックを行う必要があります。

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

または、varを使用しないでください。

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

クリックするとアップデートされます。

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

Answer 2

あなたがこれを行うことができます：

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

をも、あなたがこの

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

onmouseenterは、私が何かを使用することになり、短いカットの代わりに、バインド機能

Answer 3

を呼び出すことで行うことができますこれは次のようになります： $（ '＃main-button-btn-cart'）。live （ 'mouseenter'、function（）{ $（ '＃select-product-reminder'）。
}）;