使用"hover" "menu"在"div"内显示图像

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浏览器的图像出现在div内部。现在，当您将鼠标悬停在"Firefox"上时，它什么也不做。

Answer 1

您需要更改 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>

Answer 2

使用：

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

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

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