CSS 选择 child 时不转换

Question

我有一个侧边导航，项目悬停时会飞出。现在我在导航中添加了第二层。问题是 li a 和 sub-items 只有在悬停 sub-link 时才会飞出。

可能的场景：

Parent child 悬停：parent 飞出
Child 悬停：child 飞出（但不是 parent）
Parent 没有 child 悬停：parent 飞出

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

我怎样才能只转换 list-element 个选定的苍蝇？

这是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

您可以使用位置相对和权利只飞出选定的项目。

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

Answer 2

希望对您有所帮助..

将您的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;
}

CSS 选择 child 时不转换

CSS transition not when child is selected

css

css-selectors

css-transitions