MouseEnter 上简单的 Jquery 显示问题

发布于 2024-11-18 08:41:56 字数 852 浏览 1 评论 0原文

我是 stackoverflow 和 Jquery 的新手，所以我想提前为我的经验不足/天真道歉。

所以本质上我试图让一个 div 在按钮处于 mouseEnter 状态时出现。

这是我对 Jquery 的尝试...

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

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

而 HTML 是...

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

由于某种原因，此代码不起作用。但是，请注意，如果我在绑定函数中包含警报框，则该警报框确实会出现。

预先感谢您的任何意见！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

差↓一点笑了 2024-11-25 08:41:57

你可以这样做：

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

你也可以这样做

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

onmouseenter 是一个快捷方式，而不是调用绑定函数

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

回复收藏 0 原文

谷夏 2024-11-25 08:41:57

这应该可以解决问题；

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

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

回复收藏 0 原文