Question

我想通过“检查可用性”按钮设计类似于http://www.thedana.com/上可以看到的内容 - 我使用了w3school.com的jquery.js文件并获得了以下内容：{ {3}}（立即预订标签）。现在你已经意识到，当它不应该时（当光标仍然在场中间时）它是非常敏感和淡出的时候我怎样才能使这个更好，更用户友好？

谢谢！罗恩

更新：我试图实现它，但它并不是很有效，因为我希望在“书”上面显示我的“淡入淡出”div并在光标向下移动时保持它，在“淡入淡出”时如何实现这一点？的URL：http：//quaaoutlodge.com/drupal-7.14/

Answer 1

将div#fade放在div#book内，这样可以解决一半问题。您还必须调整CSS以适应此更改。

学习者的另一个重点是jQuery提供了不引人注目的跨浏览器事件监听器。这意味着，html中的内联JS onmouseenter="handler()"不仅是不必要的，而且技术上很丑陋 - 混合了行为结构 - 它还会用函数名称污染全局范围。

这是people针对W3School做广告的原因之一。

但回到主题这里是使用DOM Ready handler和hover的解决方案：

Fiddle

<强> HTML

<div id="book">
    <a href="/drupal-7.14//?q=book">Book Now</a>
    <div id="fade">TEST</div>
</div>

<强> JS

$(function() {
    var fade = $('#fade');
    $('#book').hover(function() {
        fade.fadeIn();
    }, function() {
        fade.fadeOut();
    });
});

同样，您必须重新修改CSS，从position:absolute删除#fade和边距。

Answer 2

你可以尝试使用jquery的.mouseleave而不是通用的onmouseout吗？

http://api.jquery.com/mouseleave/

＆＃34; mouseleave事件与mouseout处理事件冒泡的方式不同。如果在此示例中使用了mouseout，那么当鼠标指针移出Inner元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开它所绑定的元素时触发其处理程序，而不是后代。因此，在此示例中，处理程序在鼠标离开外部元素时触发，而不是内部元素。＆＃34;

非常敏感的onmouseout行为

2 个答案: