在不使用JavaScript的情况下显示悬停子菜单 [英] Displaying submenus on hover without javascript

问题描述

我有一个使用jquery显示子菜单div的网页，而用户在主父菜单中的a：链接上方悬停。

  $（'。menu ul li'）。hover（function（）{
 $（this）.find （'.dropnav'）。stop（true，true）.fadeTo（'fast'，1）; 
}，function（）{
 $（this）.find（'。dropnav'）。 stop（true，true）.fadeOut（800，0）; 
}）; 
  

问题是，我希望此网页的导航功能独立于JavaScript。因此，当用户没有启用javascript时，菜单仍然会显示 - 没有滚动或淡入淡出效果。

谢谢。

解决方案使用：hover CSS伪类。

  .menu ul li：hover .dropnav {
 opacity：1; 
 / * display：block; ？ * / 
} 
  

I have a webpage that uses jquery to display a submenu div while a user is hovering over an a:link in the main parent menu.

$('.menu ul li').hover(function() { 
    $(this).find('.dropnav').stop(true, true).fadeTo('fast', 1); 
}, function() { 
    $(this).find('.dropnav').stop(true, true).fadeOut(800, 0); 
});

The problem is, I want this webpage's navigation feature to be independent of javascript. So when users do not have javascript enabled, the menu will still display - just without the effects of scrolls or fades.

Thanks.

解决方案

Use the :hover CSS pseudo-class.

.menu ul li:hover .dropnav {
    opacity: 1;
    /* display: block; ? */
}

这篇关于在不使用JavaScript的情况下显示悬停子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！