Question

我正在尝试根据您在此图片中看到的4张图片制作一个下拉菜单 - ＆gt; http://www.potmetnoten.nl/images/dropdown.png 我正在努力实现以下目标：

最初只显示第一张照片。
当悬停在第一张图片上时 - ＆gt;显示其他照片。

我尝试过各种各样的东西，有显示效果，可见，但都不起作用。当我将鼠标悬停在第一张图片（li）上时，没有任何反应。

你们有没有看到我失踪的东西？非常感谢。

    ul {

      list-style: none;

      width: 200px;

      height: 170px;

      padding-left: 30px;

      margin: 0px;

      border: none;

      float: left;

      margin-right: 5px;

      position: relative;

      z-index: 1;

    }

    li[data-type="noten"] {

      background-image: url(images/menu-noten.jpg);

      background-repeat: no-repeat;

      display: block;

    }

    li[data-type="pitten"] {

      background-image: url(images/menu-pitten.png);

      background-repeat: no-repeat;

      display: none;

    }

    li[data-type="muesli"] {

      background-image: url(images/menu-muesli.png);

      background-repeat: no-repeat;

      display: none

    }

    li[data-type="fruit"] {

      background-image: url(images/menu-fruit.png);

      background-repeat: no-repeat;

      display: none;

    }

    li:hover li {

      display: block;

      /* display the dropdown */

    }

<ul>
  <li data-type="noten"></li>
  <li data-type="pitten"></li>
  <li data-type="muesli"></li>
  <li data-type="fruit"></li>
</ul>

Answer 1

我认为您应该为有序列表（ul）中的第一个元素创建一个悬停代码，因此每当您将鼠标悬停在第一个元素“图片”上时，其他元素都应该出现。

HTML：

<ul>
<li class="noten"  ></li>
<li class="pitten" ></li>
<li class="muesli" ></li>
<li class="fruit" ></li>
</ul>

CSS：

ul {

  list-style: none;

  width: 200px;

  height: 170px;

  padding-left: 30px;

  margin: 0px;

  border: none;

  float: left;

  margin-right: 5px;

  position: relative;

  z-index: 1;

}


li .noten {

  background-image: url(images/menu-noten.jpg);

  background-repeat: no-repeat;

  display: block;

}

li .pitten {

  background-image: url(images/menu-pitten.png);

  background-repeat: no-repeat;

  display: none;

}

li .muesli {

  background-image: url(images/menu-muesli.png);

  background-repeat: no-repeat;

  display: none

}

li .fruit {

  background-image: url(images/menu-fruit.png);

  background-repeat: no-repeat;

  display: none;

}

li .notten:hover {

  display: block;

  /* display the dropdown */

}

Answer 2

试试这个：

li[data-type="noten"]:hover li

如果不起作用，请将您的li [data-type =“noten”]作为一个类，比如 class = first 并尝试

li:first:hover li {}

否则尝试：

ul:hover li{}

另外：你强迫父母的特定身高（ul）你不应该这样做让父母总是把所有孩子的总高度一个接一个地放在一个列表中

Answer 3

我会使用:hover + #id方法使用类似的东西：

＆＃13;

ul {

      list-style: none;
      display:inline-block;

}

img {
  
  width:80px;
  height:80px;
  
  }

li#pitten {
  
  opacity:0;
  transition: all 0.5s;
  
  }

#noten:hover + li#pitten {
  
  opacity:1;
  
  }

＆＃13;

<ul>
  <li id="noten"><img id="noten" src="images/menu-noten.jpg"></li>
  <li id="pitten"><img id="pitten" src="images/menu-pitten.jpg"><img id="muesli" src="images/menu-muesli.jpg"><img id="fruit" src="images/menu-fruit.jpg"></li>
</ul>

＆＃13;

希望有所帮助！

具有图像的CSS下拉菜单

3 个答案: