Z索引 - 懸停菜單

Question

即時通訊使用一個平臺，只接受html/css在線，我被要求做一個下拉菜單，當我懸停在一個元素上，它調整大小，並有一個圖像顯示它。問題是，當我懸停在一個元素上，我不能懸停和調整第二個，除非我把鼠標放在這個。

我試圖用z index -1向後移動懸停元素，但是轉換得到了真正的錯誤並且不斷地上升和下降。

<div id="mapa-expanduno"></div> 
<div id="mapa-expanddos"></div> 
<div id="mapa-expandtres"></div> 
<div id="mapa-expandcuatro"></div> 

<style type="text/css"> 
div { 
    position: absolute; 
} 
#mapa-expanduno { 
    border: 1px solid blue; 
    margin-left: 55px; 
    width: 110px; 
    height: 125px; 
} 
#mapa-expanduno:hover { 
    width:914px; 
    height: 450px; 
    margin-left: 0px; 
    background: url(); 
    background-repeat: no-repeat; 
} 
#mapa-expanddos { 
    border: 1px solid red; 
    margin-left: 286px; 
    width: 110px; 
    height: 125px; 
} 
#mapa-expanddos:hover { 
    width:914px; 
    height: 450px; 
    z-index: -1; 
    margin-left: 0px; 
    background: url(); 
    background-repeat: no-repeat; 
} 
#mapa-expandtres { 
    border: 1px solid lightgreen; 
    margin-left: 518px; 
    width: 110px; 
    height: 125px; 
} 
#mapa-expandtres:hover { 
    width:914px; 
    height: 450px; 
    z-index: -1; 
    margin-left: 0px; 
    background: url(); 
    background-repeat: no-repeat; 
} 
#mapa-expandcuatro { 
    border: 1px solid black; 
    margin-left: 750px; 
    width: 110px; 
    height: 125px; 
} 
#mapa-expandcuatro:hover { 
    width:914px; 
    height: 450px; 
    margin-left: 0px; 
    background: url(); 
    background-repeat: no-repeat; 
} 
</style> 

Demo

感謝上的建議。

Answer 1

我切換到兄弟關係：

div { 
 
    position: absolute; 
 
} 
 
.outer { 
 
    cursor: pointer; 
 
    width: 110px; 
 
    height: 125px; 
 
} 
 
.inner { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 914px; 
 
    height: 450px; 
 
    z-index: -1; 
 
    display: none; 
 
} 
 
#mapa-expanduno { 
 
    border: 1px solid blue; 
 
    margin-left: 10%; 
 
} 
 
#mapa-expanduno:hover + .inner { 
 
    display: block; 
 
    background: url(http://lorempixel.com/1200/900/nature/4); 
 
    background-repeat: no-repeat; 
 
} 
 
#mapa-expanddos { 
 
    border: 1px solid red; 
 
    margin-left: 30%; 
 
} 
 
#mapa-expanddos:hover + .inner { 
 
    display: block; 
 
    background: url(http://lorempixel.com/1200/900/nature/3); 
 
    background-repeat: no-repeat; 
 
} 
 
#mapa-expandtres { 
 
    border: 1px solid lightgreen; 
 
    margin-left: 50%; 
 
} 
 
#mapa-expandtres:hover + .inner { 
 
    display: block; 
 
    background: url(http://lorempixel.com/1200/900/nature/2); 
 
    background-repeat: no-repeat; 
 
} 
 
#mapa-expandcuatro { 
 
    border: 1px solid black; 
 
    margin-left: 70%; 
 
} 
 
#mapa-expandcuatro:hover + .inner { 
 
    display: block; 
 
    background: url(http://lorempixel.com/1200/900/nature/1); 
 
    background-repeat: no-repeat; 
 
}

<div class="outer" id="mapa-expanduno"></div> 
 
<div class="inner"></div> 
 
<div class="outer" id="mapa-expanddos"></div> 
 
<div class="inner"></div> 
 
<div class="outer" id="mapa-expandtres"></div> 
 
<div class="inner"></div> 
 
<div class="outer" id="mapa-expandcuatro"></div> 
 
<div class="inner"></div> 
 
<div id="preloader" style="position: absolute; left: -999em;"> 
 
    <img src="http://lorempixel.com/1200/900/nature/3" /> 
 
    <img src="http://lorempixel.com/1200/900/nature/4" /> 
 
    <img src="http://lorempixel.com/1200/900/nature/1" /> 
 
    <img src="http://lorempixel.com/1200/900/nature/2" /> 
 
</div>

JSFiddle demo

這裏的a version with some transitions。

Answer 2

我不知道這是否有幫助，因爲問題不清楚，但我會嘗試提供幫助。 如果沒有HTML，很難確切知道這裏發生了什麼。

您可以在「：hover」選擇器之後添加一個「> [需要更改的元素]」選擇器。

所以它會是這樣的

parent_element{ 
    margin-left: 750px; 
    width: 110px; 
    height: 125px; 
    background: url(); 
    background-repeat: no-repeat; 
} 
parent_element:hover > child_element{ 
    width:914px; 
    height: 450px; 
    margin-left: 0px; 
    background: url(); 
    background-repeat: no-repeat; 
} 

如果不是，你將不得不使用JavaScript來進行更改的子元素。 你也可以考慮在你的css中使用轉換，這會使盒子增長。