CSS Transition - 將鼠標懸停在父項上，影響子項，將鼠標懸停在子項上

Question

請查看此jsfiddle以瞭解當前的實施情況。

<div id="menu"> 
    <a href="#" class="left"><p>Left</p></a> 
    <a href="#" class="right"><p>Right</p></a> 
    <a href="#" class="top"><p>Top</p></a> 
    <a href="#" class="bottom"><p>Bottom</p></a> 
    <div id="icon"> 
    <p class="icon-text">Hover over me</p> 
    </div> 
</div> 

我有一個父DIV，這時候我在它懸停，左右移動的幾個子項目並揭示了他們。但是，當我將鼠標懸停在子項上時，我想要更多地展示它們，但瀏覽器仍然認爲我只是徘徊在父項上。

任何想法？

CSS問題：

body { 
    background-color: #8bd8f4; 
    height: 100%; 
    width: 100%; 
} 

#menu { 
    position: absolute; 
    top: 25%; 
    left: 43%; 
    height: 210px; 
    width: 210px; 
    border-radius: 100%; 
    border:7px solid #333; 
    background-color: #8bd8f4; 
    cursor: pointer; 
    transition:all 0.7s; 
    -webkit-transition:all 0.7s; 
    -moz-transition: all 0.7s; 
} 

#menu:hover a.left { 
    left: -15%; 
} 

#menu:hover a.right { 
    right: -15%; 
} 

#menu:hover a.top { 
    top: -15%; 
} 

#menu:hover a.bottom { 
    bottom: -15%; 
} 

#icon { 
    position: absolute; 
    left: 4.5px; 
    top: 4.5px; 
    height: 200px; 
    width: 200px; 
    border-radius: 100%; 
    background-color: #333; 
    color: #8bd8f4; 
    text-align: center; 
} 

p.icon-text { 
    position: relative; 
    font-size: 22px; 
    font-family: 'Open Sans', Sans-Serif; 
    font-weight: bold; 
    text-transform: uppercase; 
    top: 30%; 
} 

a { 
    position: absolute; 
    text-decoration: none; 
    color: #8bd8f4; 
    background-color: #333; 
    text-transform: uppercase; 
    padding: 10px; 
    font-size: 18px; 
    font-family: 'Open Sans', Sans-Serif; 
    font-weight: bold; 
    text-align: center; 
    border-radius: 25%; 
} 

a.left { 
    top: 26.5%; 
    left: 5%; 
    height: 80px; 
    width: 150px; 
    z-index: -1; 
    transition:left 0.7s; 
    -webkit-transition:left 0.7s; 
    -moz-transition: left 0.7s; 
} 

a.left:hover { 
    left: -100px; 
} 

a.right { 
    top: 26.5%; 
    right: 5%; 
    height: 80px; 
    width: 150px; 
    z-index: -1; 
    transition:right 0.7s; 
    -webkit-transition:right 0.7s; 
    -moz-transition: right 0.7s; 
} 

a.right:hover { 
    right: -100px; 
} 

a.top { 
    top: 5%; 
    left: 26%; 
    width: 80px; 
    height: 150px; 
    z-index: -1; 
    transition:top 0.5s; 
    -webkit-transition:top 0.5s; 
    -moz-transition: top 0.5s; 
} 

a.top:hover { 
    top: -100px; 
} 

a.bottom { 
    bottom: 5%; 
    left: 26%; 
    width: 80px; 
    height: 150px; 
    z-index: -1; 
    transition:bottom 0.7s; 
    -webkit-transition:bottom 0.7s; 
    -moz-transition: bottom 0.7s; 
} 

a.bottom:hover { 
    bottom: -100px; 
} 

Answer 1

Simly添加#menu > a無論你指向你的菜單孩子：

http://jsbin.com/asewup/1/edit

例如：

#menu > a.left { 
    top: 26.5%; 
    left: 5%; 
    height: 80px; 
    width: 150px; 
    z-index: -1; 
    transition:left 0.7s; 
    -webkit-transition:left 0.7s; 
    -moz-transition: left 0.7s; 
} 

#menu > a.left:hover { 
    left: -100px; 
} 

等爲其他3個元素

此外，以防止進一步的問題，更具體與您的選擇，所以不是使用

a { 
    position: absolute; /* this is not good, target globally every single anchor */ 
    text-decoration: none; 
    ... 

使用：

#menu > a { 
    position: absolute; 
    text-decoration: none; 
    ...