Z index - Hover menu

Question

Я использую платформу, которая принимает только html/css в строке, и мне было предложено как-то выпустить меню, где, когда я наводил на один элемент, он меняет его размер и появляется изображение Это. Проблема в том, что когда я наводил один элемент, я не могу навешивать и изменять размер второго, если только я не нажму на это.

Я попытался отодвинуть назад элементы наведения с индексом z -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, что увеличит размер окна.