javascript - 非常敏感的 onmouseout 行为

Question

我想设计类似于 http://www.thedana.com/ 上可以看到的东西通过“检查可用性”按钮 - 我使用了来自 w3school.com 的 jquery.js 文件，到目前为止得到了以下信息:http://quaaoutlodge.com/drupal-7.14/ (现在预订选项卡)。现在，正如您所意识到的，它非常敏感，有时会在不应该出现的时候(当光标仍在字段中间时)淡出，我怎样才能让它变得更好、对用户更友好？

谢谢!罗恩

更新:我试图实现它，但它不太有效，因为我想在将鼠标悬停在“书”上时显示我的“淡入淡出”div，并在光标向下移动时保持它，在“淡入淡出”上如何实现？网址: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，从 #fade 中移除 position:absolute 和边距。