3

我想通过“检查可用性”按钮设计类似于在http://www.thedana.com/上可以看到的东西- 我使用了 w3school.com 的 jquery.js 文件并得到了以下内容： http: //quaaoutlodge.com/drupal-7.14/（立即预订标签）。现在您意识到，它非常敏感，有时会在不应该的时候淡出（当光标仍在字段中间时）我怎样才能使它更好，更用户友好？

谢谢！罗恩

更新：我试图实现它，但它并不完全有效，因为我想在将鼠标悬停在“书”上时显示我的“淡化”div，并在光标向下移动时保持它，在“淡化”上我该如何完成这个? 网址：http://quaaoutlodge.com/drupal-7.14/

4

2 回答 2

1

放在div#fade里面div#book，那将解决你一半的问题。您还必须针对此更改调整 CSS。

对学习者来说另一个非常重要的一点是，jQuery 提供了不显眼的跨浏览器事件侦听器附加。这意味着，html as 中的内联 JSonmouseenter="handler()"不仅是不必要的而且在技术上很丑陋——结构与行为的混合——它还用函数名污染了全局范围。

这就是人们为W3School 做广告的原因之一。

但回到主题，这里有一个使用DOM Ready 处理程序和悬停处理程序的解决方案：

小提琴

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.

于 2012-10-06T05:31:10.623 回答
0

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

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

“mouseleave 事件与 mouseout 处理事件冒泡的方式不同。如果在此示例中使用 mouseout，则当鼠标指针移出 Inner 元素时，将触发处理程序。这通常是不受欢迎的行为。mouseleave 事件另一方面，只有当鼠标离开它所绑定的元素而不是后代元素时才会触发它的处理程序。所以在这个例子中，当鼠标离开外部元素而不是内部元素时触发处理程序。”

于 2012-10-06T05:11:21.767 回答