Question

我想在悬停时显示以下按钮，并在用户将鼠标移开时将其删除。这是我到目前为止的代码：

<script>
$(document).ready(function()) {
$('div.service-item').hover().toggle().html('<br /><a href='order/products' class='button'>Get Started</a>');
}
</script>

Answer 1

请参阅jQuery API for .hover()

$('div.service-item').hover(function() {
    // Hover in
}, function() {
    // Hover out
});

Answer 2

你的功能是触发'div.service-item'的悬停事件（即什么都不做），然后切换它（可能是删除它）。你想这样做：

$("div.service-item").hover(function () {
      $(this).html("<br /><a href='order/products' class='button'>Get Started</a>");
   },
   function () {
      $(this).html("");
   }
);

然而，用css做这个可能会更好。只需将div中的html隐藏起来，然后将其显示在:hover上。

Answer 3

<script>
$(document).ready(function()) {
    $('div.service-item').bind("mouseenter", function(){
        $(this).toggle().html('<br /><a href="order/products" class="button">Get Started</a>');
    });
}
</script>

您的链接中也存在拼写错误。

当用户使用jQuery将鼠标移到div元素上时，如何切换此html？

3 个答案: