javascript - 鼠标悬停时弹出一个窗口

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
  }
 });
});

试试这个

参考

Answer 2

I've a solution. Please refers http://jsfiddle.net/ardeezstyle/JaYmn/1/

Here is the code.

$(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 将其位置设置为绝对将其移动到您想要的位置并将显示设置为无。

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

Answer 4

不要为此使用 javascript —— 因为你所要求的，你只需要 CSS。

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

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

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