jquery hooverintent，适用于 chrome 和 firefox，当我将鼠标悬停在 Internet Explorer 中的一个元素上时，会触发所有悬停功能

发布于 2024-10-07 11:41:15 字数 1036 浏览 6 评论 0原文

我创建了一个垂直菜单，当鼠标悬停在菜单上时，该菜单会水平展开。它在 chrome 和 firefox 中的工作就像一个梦想，但是 Internet Explorer 由于某种原因不喜欢它。当鼠标悬停在任何元素上时，它们都会弹出。

该函数使用 jquery 插件悬停意图，它使用 animate 更改 css。这是一些代码...

// one of these functions for each menu item, the inactive3 is obviously changed to the different list element

  $('li.inactive3').hoverIntent(expandit3, resetit3);

  function expandit3(){
$('li.inactive3').stop().animate({ width: "609px",height: "306px"}, "fast" );
  }

  function resetit3(){
$('li.inactive3').stop().animate({ width: "150px",height: "153px"}, "slow" );
  }


// the list elements are contained in the menudiv

#menudiv {
 z-index: 3;
 float: left;
 visibility: visible;
 position: fixed;
 display:block;

overflow:hidden;
}

// here is the list item css

  .inactive3 {
 z-index: 3;
 list-style-type: none;
 width: 150px;
 height: 153px;
 overflow: hidden;
 margin: 0px;
 padding: 0px;
 visibility: visible;
clip:auto;
display:block;
}

任何想法都会非常有帮助，因为我已经绞尽脑汁思考这个问题好几天了，这似乎是 iexplorer 的某种问题。

干杯

原文

I have created a vertical menu which expands out horizontally when hovered over. It works like a dream in chrome and firefox, however internet explorer doesnt like it for some reason. When hovering over any element they all pop out.

The function uses the jquery plugin hover intent which alters the css using animate.
Here is some of the code...

// one of these functions for each menu item, the inactive3 is obviously changed to the different list element

  $('li.inactive3').hoverIntent(expandit3, resetit3);

  function expandit3(){
$('li.inactive3').stop().animate({ width: "609px",height: "306px"}, "fast" );
  }

  function resetit3(){
$('li.inactive3').stop().animate({ width: "150px",height: "153px"}, "slow" );
  }


// the list elements are contained in the menudiv

#menudiv {
 z-index: 3;
 float: left;
 visibility: visible;
 position: fixed;
 display:block;

overflow:hidden;
}

// here is the list item css

  .inactive3 {
 z-index: 3;
 list-style-type: none;
 width: 150px;
 height: 153px;
 overflow: hidden;
 margin: 0px;
 padding: 0px;
 visibility: visible;
clip:auto;
display:block;
}

Any ideas would be extemely helpful as I have been racking my brain about this problem for days, it just seems to be some kind of problem with iexplorer.

cheers

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青衫负雪 2024-10-14 11:41:15

这应该是所有浏览器中的行为，要具有每个元素的行为，您应该对当前元素使用this，如下所示：

$('li.inactive3').hoverIntent(expandit3, resetit3);
function expandit3(){
  $(this).stop().animate({ width: "609px",height: "306px"}, "fast" );
}
function resetit3(){
  $(this).stop().animate({ width: "150px",height: "153px"}, "slow" );
}

That should be the behavior in all browsers, to have per-element behavior, you should use this for the current element, like this:

$('li.inactive3').hoverIntent(expandit3, resetit3);
function expandit3(){
  $(this).stop().animate({ width: "609px",height: "306px"}, "fast" );
}
function resetit3(){
  $(this).stop().animate({ width: "150px",height: "153px"}, "slow" );
}

回复收藏 0 原文