使用“悬停”到“菜单”以在“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”上，并在div中显示Firefox浏览器的图像。现在，当你将鼠标悬停在“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');
}