0

一个页面有 4 个 div:

  1. 项目 A
  2. B项
  3. 项目 C
  4. 详细信息(隐藏)

想要的效果是当鼠标悬停在项目框上时会显示详细信息框,一旦鼠标移出就会隐藏。显示时,详细信息框将与项目框右侧约 20% 重叠。

但是,我得到的当前错误效果是,当我将鼠标悬停在任何项目框的右边缘时,它会进入显示和隐藏详细信息框的永久循环。大概这是因为它触发了 Item 框的 mouseout 事件(当 Details 显示时),但在 Details 框隐藏时立即再次触发 mouseover 事件。我想知道如何解决这个问题。

我目前的代码是:

$('div.item').hover(
    function() {
        $(this).showDetails();
    },
    function() {
        $(this).hideDetails();
    }
);

提前感谢您的任何指点!这是任何无法可视化的人的 jsfiddle 链接。尝试将鼠标悬停在右侧的项目框上,然后稍微移动鼠标,您会看到闪烁的情况。

http://jsfiddle.net/s6CjP/1

Xavier,我已经为详细信息框尝试了 appendTo,但我想要的效果是我想让鼠标事件只针对可操作的 div(即项目)。经过一些研究,我什至很确定这是否可能,因为详细信息框覆盖了 div(因此无法将事件附加到它下面的东西)

4

4 回答 4

1

一种解决方法是让详细信息 DIV 成为您悬停的项目的子项。这样,当指针位于详细信息 DIV 上时,指针仍然“位于”正确的项目中,并且直到鼠标离开两个DIV 时才会发送 mouseout。你至少可以通过两种方式做到这一点:

  1. 每个项目 DIV 都有一个单独的详细信息 DIV(无论如何,它们都有不同的详细信息,对吧?)。
  2. 将详细信息 DIV 从 DOM 中拉出,并将其附加到 showDetails() 函数中的正确项目 DIV。

您必须做一些 CSS 技巧才能让它按您想要的方式显示,但只要父子关系存在,您就不必担心错误的鼠标事件。

希望这可以帮助!

于 2011-02-02T01:16:28.307 回答
0

试试这个:

我认为这是你正在寻找的:

HTML:

<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item A</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item B</div>
<br />
<div class="divItem" style="width:50px;height:50px;background-color:#FFEFC6">Item C</div>
<div id="divMove" style="width:100px;height:100px;background-color:#D9E9D0;display:none">
</div>

JAVASCRIPT:

$(".divItem").mousemove(function(e){
    var left  = e.pageX + 10 + "px";
    var top  = e.pageY + 20 + "px";

    $("#divMove").show().css("top",top).css("left",left).css("position","absolute");
}).mouseout(function(){
    $("#divMove").hide();
   }).mouseenter(function(){
        $("#divMove").text($(this).text());    
});

单击此处查看示例

于 2011-02-02T08:16:38.523 回答
0

Nando,那里有一些更好的答案,但我只是想把它扔在那里,尽管我相信你已经尝试过了。

特别是因为您使用了 hover(),这听起来有点像您遇到了一个非常简单的问题。

我确定您尝试过 stop(true, true) 对吗?

//
$('div.item').hover(
    function() {
        $(this).stop(true, true).showDetails();
    },
    function() {
        $(this).stop(true, true).hideDetails();
    }
);
//
于 2011-02-02T16:40:51.990 回答
0

我无法想象您的问题。目前尚不清楚详细信息框是否在所有情况下看起来都相同,以及页面上的项目 div 在哪里,以及彼此之间的关系。

请您为它创建一个JSFiddle并在其中粘贴一些 CSS、HTML 和 JS。那我可以看看。

于 2011-02-02T01:12:38.983 回答