Question

似乎是一个常见问题，但到目前为止我找到的答案都没有一切似乎都是一个非常标准和简单的代码，但却无法使该死的东西发挥作用。制作一个下拉菜单，我需要一个隐藏的ul在悬停时缓慢显示。

它的HTML

<div class="main-nav">
  <ul>
    <li>
      <a href="wtvr">Title</a>
      <ul class="dropedmainnav t50 ">
        <li class="subnavli" style="position:relative;">
          <div class="superimage" style="position:absolute;  right:-100%;">
            <img src="" alt="{{link.handle}}">
          </div>
        </li>
        <li class="t50 subnavli">
          <a href="wtvr">Subnav link</a>
        </li>
        <div class="subnavsides"></div>
      </ul>
    </li>        
  </ul>
</div>

js of it

$(".main-nav ul li").each(function(){
    $(this).mouseover(function(){$(this).find("ul").addClass("dropedunderul");});
    $(this).mouseleave(function(){$(this).find("ul").removeClass("dropedunderul"); });
    $(this).find("ul").mouseover(function(){$(this).addClass("dropedunderul");});
    $(this).find("ul").mouseleave(function(){$(this).removeClass("dropedunderul");});

}）;

和css

.t50 {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.dropedmainnav {display:none; padding:15px 0 10px 0; overflow:hidden;width:500px; }
.dropedunderul {display:table !important; min-height:150px; border-top:2px solid transparent; z-index:2; }
.main-nav ul li {position:relative;}
.main-nav ul li ul {position:absolute;background-color:rgba(255,255,255,0); overflow:visible;}
.main-nav ul li ul li {float:none !important; text-align:left !important;}

我认为这是关于相关风格的。我还试过将转换专门添加到.dropedmainnav，.dropedunderul，并尝试使用内联样式。

Answer 1

我不确定你用$ .each（）做了什么，在每个鼠标进入/离开事件上调用一个函数并让它淡入/淡出是不是更简单：

$(".main-nav ul li").mouseenter(function() {
      $(this).children('dropedmainnav').fadeIn(500);
     }
 }).mouseleave(function() {
      $(this).children('dropedmainnav').fadeOut(500);  
     }
 });

Answer 2

不确定你到底想要实现什么，但你当然可以摆脱所有这些jQuery大惊小怪。所有动画和鼠标悬停效果都可以通过CSS（使用:hover）完成。试试下面的代码段，如果与您想要的内容无关，请随时发表评论。

＆＃13;

body { font-family: arial; }

.onhover {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}

li       .onhover { height: 0; width: 200px; overflow: hidden; border: 1px solid transparent; }
li:hover .onhover { height: 20px; border-color: #ccc; }

＆＃13;

<div>
  <ul>
    <li>
      <div>Item 1</div>
      <div class="onhover">You are hovering item 1</div>
    </li>
    
    <li>
      <div>Item 2</div>
      <div class="onhover">You are hovering item 2</div>
    </li>
  </ul>
</div>

＆＃13;

addClass转换不起作用

2 个答案: