Z index - Hover menu

Question

Im using a platform that only accepts html / css in line, and i was asked to make somehow a dropdown menu, where when i hover on one element, it resize it and there is an image show on it. The problem is that when i hover on one element, i cant hover and resize the second one, unless i take the mouse over this.

I tried to move backwards the hover elements with z index -1, but the transition got really bugged and goes up and down constantly.

<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

Thanks on advice.

Can you make an example, for instance in a snmippet here in the question, that demonstrates the problem? From your description, it's not very clear what the issue is. It sounds like your problem is that when you hover over one div, you can't hover over another at the same time? — Mr Lister, Oct 26 '15 at 17:46
What does "unless i take the mouse over this" mean? The demo I added above seems to work as you intend. — isherwood, Oct 26 '15 at 17:49

score 0 · Answer 1 · answered Oct 26 '15 at 18:08

I'd switch to a sibling relationship:

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

Here's a version with some transitions.

score 0 · Answer 2 · answered Oct 26 '15 at 18:08

0

I don't know if this is helpful because the question is unclear, but I'll attempt to help. It is hard to know exactly what's going on here without your HTML.

You can add a "> [desired element to change]" selector after your ":hover" selector.

so it would be something like

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

If it is not a child element you will have to use JavaScript to make the changes. You might also consider using transitions in your css, which would make the box grow.

answered Oct 26 '15 at 18:08

APrioriRainbows

113
7

I know. This can be solved on JS so easily, but i was requested to do it on HTML/CSS only. Im going to try child element, but i dont think this is what i want (sorry for the bad explanation on the problem, english is not my first language, and its even harder when explaining this type of things). Thank you anyway! – Mateo R. Oct 26 '15 at 18:48
You can use child element, but that is what "> [element" after the hover will do. http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean However, this won't work unless the thing that is changing is a child. And the way you have it setup, there is no child/parent relationship, i.e. you have all of these as separate DIVs. See @isherwood 's response for how you might set this up. – APrioriRainbows Oct 26 '15 at 19:39

Z index - Hover menu

2 Answers2