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

【问题标题】：Using "hover" to a "menu" to show an image inside a "div"使用“悬停”到“菜单”以在“div”中显示图像
【发布时间】：2019-08-23 10:42:56
【问题描述】：

我需要使用鼠标悬停菜单以使图像出现在下面的 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”上时，它什么也不做。

【问题讨论】：

您可以接受 JavaScript 方法吗？
除非你改变你的 HTML 结构，否则你不能单独使用 CSS 来做到这一点

标签： html css image menu hover

【解决方案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>

【讨论】：

【解决方案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");，带引号

【讨论】：

【解决方案3】：

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

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

【讨论】：