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

我切换到兄弟关系：

＆＃13;

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

＆＃13;

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

＆＃13;

<强> JSFiddle demo

此处a version with some transitions。

Answer 2

我不知道这是否有用，因为问题不清楚，但我会尝试提供帮助。如果没有你的HTML，很难确切地知道这里发生了什么。

您可以添加＆＃34;＆gt; [需要改变的元素]＆＃34;你的＆＃34;之后的选择器：hover＆＃34;选择器。

所以它会像

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中使用转换，这会使框增长。

Z索引 - 悬停菜单

2 个答案: