悬停时显示的登录下拉菜单css3

-3

它有一个名为“Login/Register”的链接，最初在底部有一个图像。在悬停链接时，一个盒子可以放下（忘记盒子中使用的样式）。悬停时显示的登录下拉菜单css3

即将到来的问题。该图像对我来说没有用处。我删除了img标签并重新加载了该页面。现在，当我将鼠标悬停在登录链接下方时（不在其上），该框出现。我只希望盒子在链接上悬停时出现，请注意，当图像在那里时它可以正常工作。

.nav div.submenu, .nav ul.children, #header .yit_cart_widget .widget_shopping_cart_content, #header .sbHolder .sbOptions, #topbar .widget_nav_menu ul.menu ul.sub-menu, #lang_sel li > ul, #wcml_currency_switcher ul li ul { 
 
    position: absolute; 
 
    background: #fff; 
 
    border: 1px solid; 
 
    border-bottom-width: 0; 
 
    -webkit-box-shadow: 1px 1.732px 3px 0px rgba(0, 0, 0, 0.19); 
 
    -moz-box-shadow: 1px 1.732px 3px 0px rgba(0, 0, 0, 0.19); 
 
    box-shadow: 1px 1.732px 3px 0px rgba(0, 0, 0, 0.19); 
 
    z-index: -1; 
 
    opacity: 0; 
 
    margin-top: -26px; 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -ms-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
    -webkit-transition-delay: 0.3s; 
 
    transition-delay: 0.3s; 
 
} 
 

 
#welcome-menu-login .login-box form.login { 
 
    border: 0; 
 
    padding: 0; 
 
    background: none; 
 
} 
 

 
.nav li:hover > div.submenu, 
 
.nav li:hover > ul.children, 
 
#header .yit_cart_widget:hover .widget_shopping_cart_content, 
 
#header .yit_cart_widget .widget_shopping_cart_content.active, 
 
#header .sbHolder .sbOptions, 
 
#header .shop-by-category:hover > div.submenu, 
 
#topbar .widget_nav_menu ul.menu li:hover > ul.sub-menu, 
 
#lang_sel li:hover > ul, 
 
#wcml_currency_switcher ul li ul { 
 
    z-index: 10000; 
 
    opacity: 1; 
 
    margin-top: 0; 
 
}

        <div id="welcome-menu-login" class="nav"> 
 
            <ul id="menu-welcome-login"> 
 
             <li class="menu-item login-menu dropdown"> 
 
              <a href="http://live.yithemes.com/nielsen/my-account/">Login/Register</a> 
 
              <div class="submenu clearfix"> 
 
              <div class="clearfix login-box with_registration"> 
 
               <div id="customer_login"> 
 
                <div class="customer-login-box customer-login-box1"> 
 
                 <form method="post" class="login"> 
 
                 <div class="form-group"> 
 
                  <label for="username">Username or email address <span class="required">*</span></label> 
 
                  <input type="text" class="form-control" name="username" id="username"> 
 
                 </div> 
 
                 <div class="form-group"> 
 
                  <label for="password">Password <span class="required">*</span></label> 
 
                  <input class="form-control" type="password" name="password" id="password"> 
 
                 </div> 
 
                 <div class="form-group login-submit"> 
 
                  <input type="hidden" id="_wpnonce" name="_wpnonce" value="50d289eef4"><input type="hidden" name="_wp_http_referer" value="/nielsen/">             <input type="submit" class="button btn btn-flat-red button-login" name="login" value="Login"> 
 
                  <p class="lost_password"> 
 
                   <a href="http://live.yithemes.com/nielsen/my-account/lost-password/">Lost password?</a><br> 
 
                   New Customer ? <a class="signup" href="http://live.yithemes.com/nielsen/my-account/">Sign up</a> 
 
                  </p> 
 
                 </div> 
 
                 </form> 
 
                </div> 
 
               </div> 
 
              </div> 
 
              </div> 
 
             </li> 
 
            </ul> 
 
           </div> 
 

 
         <img src="http://www.cigarsnapshot.com/wp-content/uploads/2011/07/ad-placeholder250x250.gif">

https://jsfiddle.net/jm8q32t7/。

来源

2016-01-06 mirza vu

而不是试图避免链接到jsFiddle时在你的问题中发布你的代码的SO规则，你为什么不做什么问你？ – j08691

html和css使用的是简单的位冗长，使读者恼火。这就是为什么选择这个。 –

将您的代码缩小到恰恰相关。 –

元素仍然反应，从而徘徊覆盖的任何区域时，内容会出现鼠标事件（点击，悬停）。

它与图像一起工作的原因与z-index有关。子菜单有z-index:-1，图像具有正值（因此没有显式声明）。

在用户鼠标事件的情况下，第一优先级是z-index最高的元素 - 图像。一旦图像被移除，子菜单就成为第一优先级。

您可以使用visibility属性使元素对鼠标事件透明。使用以下组合：

visibility:hidden; 
opacity:0;

和

visibility:visible; 
opacity:1;

查看更新后的fiddle。

来源

2016-01-06 20:53:48 KrisD

完美的简单解决方案。感谢您对此的努力和解释。 –

我尝试运用Jquery，就是你的菜单（div.submenu）是链接的兄弟（a.link），所以它是不可能的（我想了很多，我将不胜感激有人想出了它）与CSS做，所以这里是Jquery的另一个解决方案。看一看。

我申请CSS规则到div.submenu元素当你mouseover链接和切换它。

$('.menu-item ').hover(function(){ 
    console.log(1111); 
    $('div.submenu').show(); 
    },function(){ 
    $('div.submenu').hide(); 
    });

这里是一个fiddle做与opacity: 0;相同

来源

2016-01-06 19:06:36 Siddharth

感谢您的努力哥们。但是从代码中丢失了动画。 –

悬停时显示的登录下拉菜单css3

回答

相关问题