Question

我需要使用鼠标悬停菜单以使图像显示在下面的DIV中。

ul li a:hover {
  background: #43FD49;
}

div#firefox {
  align: center;
  background-position: 50% 50%;
  width: 50%;
  height: 50%;
  position: relative;
  background-color: white;
  margin-top: 25%;
  margin-left: 25%;
  background-image: url(img1.jpg);
  display: none;
}

ul li a#imgfirefox:hover+div#firefox {
  display: block;
}

<ul>
  <li><a href="#">algo</a></li>
  <li><a href="#">Inicio</a></li>
  <li><a id="imgfirefox" href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Opera</a></li>
</ul>

<div>
  <div id="firefox"></div>
</div>

我希望将鼠标悬停在“ Firefox”上，并且Firefox内部的Firefox浏览器图像会显示在下面。现在，当您将鼠标悬停在“ Firefox”上时，它什么也没做。

Answer 1

使用：

<li><a id="imgfirefox" href="#">Firefox</a><img src="ff.jpg"></li>

并使用CSS

div#firefox img{display:none}

div#firefox img:hover{display:block}

而不是使用背景图片。

PS：您还应该使用带引号的background-image: url("img1.jpg");

Answer 2

考虑使用JavaScript方法或执行以下操作：

#firefox:hover{
    background-image: url('img1.jpg');
}

Answer 3

您需要更改HTML的结构

ul li a:hover {
  background: #43FD49;
}

#firefox {
  width: 50px;
  height: 50px;
  background-color: yellow;
  display: none;
}

#imgfirefox:hover ~ #firefox {
  display: block;
}

<ul>
  <li><a href="#">algo</a></li>
  <li><a href="#">Inicio</a></li>
  <li id="imgfirefox" ><a href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Opera</a></li>
  
  <div id="firefox"></div>
</ul>

使用“悬停”到“菜单”以显示“ div”中的图像

3 个答案: