Question

我有一个侧面导航，当物品悬停时它们会飞出来。现在我在导航中添加了第二级。问题是，当子链接悬停时，带有子项的li a才会飞出。

可能的情况：

有孩子的父母盘旋：父母飞出
孩子徘徊：孩子飞出（但不是父母）
没有孩子的父母徘徊：父母飞出

这是我所说的JSBin： http://jsbin.com/zusoyeweqa/edit?html,css,js,output

如何只选择列表元素fly过渡？

这是 HTML ：

<nav id="site-navigation" role="navigation">
   <ul class="side-nav">
      <li><a href="#">Blog</a>
         <ul>
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
         </ul>
      </li>
      <li><a href="#">Tools</a></li>
   </ul>
</nav>

这是 CSS

#site-navigation ul>li{
   font-size: 1.6em;
   width: auto;
   float: right;
   display: block;
   clear: both;
   line-height: 1em;
   margin-bottom: 1px;
}

#site-navigation ul>li a{
   -webkit-transition: all 0.3s ease-in-out;
   -transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

   font-family: "Oswald",Arial,sans-serif;
   text-transform: uppercase;
   background: #FFF;
   color: #000;
   padding: .25em;
   width: auto;
}

#site-navigation ul>li a:hover{
   background: #c00;
   color: #fff;
   padding-right: 1em;
}

#site-navigation ul>li>ul>li a {
  color: #FFF;
  background: none;
}

编辑：添加了jsbin http://jsbin.com/zusoyeweqa/edit?html,css,js,output

Answer 1

我希望这有帮助..

用以下

替换你的css

#site-navigation .side-nav>li{
   font-size: 1.6em;
   width: auto;
   float: right;
   display: block;
   clear: both;
   line-height: 1em;
   margin-bottom: 1px;
}

#site-navigation .side-nav>li a{
   -webkit-transition: all 0.3s ease-in-out;
   -transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

   font-family: "Oswald",Arial,sans-serif;
   text-transform: uppercase;
   background: #FFF;
   color: #000;
   padding: .25em;
   width: auto;
  position:relative;
}
#site-navigation ul>li a:hover{
   background: #c00;
   color: #fff;
   right: 1em;
}
#site-navigation ul>li a:hover .{
   background: #c00;
   color: #fff;
   right: 1em;
}

Answer 2

您可以使用相对位置和右侧位置来仅播放所选项目。

#site-navigation .side-nav>li{
   font-size: 1.6em;
   width: auto;
   float: right;
   display: block;
   clear: both;
   line-height: 1em;
   margin-bottom: 1px;
}

#site-navigation .side-nav>li a{
   -webkit-transition: all 0.3s ease-in-out;
   -transition: all 0.3s ease-in-out;
   -webkit-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

   font-family: "Oswald",Arial,sans-serif;
   text-transform: uppercase;
   background: #FFF;
   color: #000;
   padding: .25em;
   width: auto;
   /* Use position relative and right to fly out.  */
   position: relative;
   right: 0;
}

#site-navigation ul>li a:hover{
   background: #c00;
   color: #fff;
   /* Use right to fly out. */
   right: 1em;
}

CSS转换不是在选择子项时

2 个答案: