Question

我想向您展示一个网站www.skinnyties.com. 我想问一下，每当你将鼠标悬停在收集/颜色等导航时。然后你会看到弹出一个新窗口。我想问一下如何在我自己的页面上创建这样的窗口。

谢谢

Answer 1

在绑定对象时，您需要直接使用mouseenter和mouseleave事件（.hover（）使用）：

$(document).ready(function(){
 $('.some-class').bind({
  mouseenter: function(e) {
  // Hover event handler
   alert("hover");
  },
  mouseleave: function(e) {
  // Hover event handler
   alert("hover");
  },
  click: function(e) {
  // Click event handler
   alert("click");
  },
  blur: function(e) {
  // Blur event handler
  }
 });
});

Try This

Reference

Answer 2

我有一个解决方案。请参考http://jsfiddle.net/ardeezstyle/JaYmn/1/

这是代码。

$(document).delegate('.option','mouseenter',function(){
$('.option-container').addClass('hidden');
$(this).next('.option-container').removeClass('hidden');
});

$(document).delegate('.option-container','mouseleave',function(){
$(this).addClass('hidden');
});

Answer 3

只需创建一个div设置其位置，将其绝对移动到您想要的位置，并将display设置为none。

然后使用导航链接的鼠标悬停事件，并使用javascript将显示设置为阻止。

Answer 4

不要使用javascript - 因为你要求的只需要CSS。

浏览这些教程。他们确切地解释了如何以基本的方式完成你想要的东西。

http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

http://designmodo.com/css3-dropdown-menu/

弹出鼠标悬停窗口

4 个答案: