悬停时显示图像的 CSS 代码答案

【问题标题】：CSS code to display image when hovered over悬停时显示图像的 CSS 代码
【发布时间】：2015-11-06 15:27:55
【问题描述】：

我对编码很陌生。我在悬停时显示图像时遇到问题。图像在一个 div 中。我可以隐藏它，但无法弄清楚当鼠标悬停在 div 上时显示图像时我做错了什么。

这是一个课堂作业，我们将不胜感激。

#image1 {
	display:none;
}

#image1:hover {
	display:inline;
}

    .box {
	float:left;
	height:200px;
	width:200px;
 	margin:10px;
}

#box1 {
	background-color:#51a3a3;
}

<section id="work">

<div class="box" div id="box1"> <img id="image1" src="images/photography_lmadesign.png"></div>
<div class="box" div id="box2"><img src="images/cms_lmadesign.png"></div>
<div class="box" div id="box3">Content for  class "box" Goes Here</div>
<div class="box" div id="box4">Content for  class "box" Goes Here</div>
<div class="box" div id="box5">Content for  class "box" Goes Here</div>
<div class="box" div id="box6">Content for  class "box" Goes Here</div>

</section>

【问题讨论】：

请忽略 sn-p，这是我将代码放入帖子的唯一方法。
你已经得到了很好的答案，但据你所知..尝试阅读 toggle() 你会感到惊讶:)

标签： html css

【解决方案1】：

您不能将鼠标悬停在设置为 display: none 的内容上，请将 #image1:hover 更改为

box1:hover > img 在#div1 悬停时显示图像。

“文档呈现为好像元素不存在...”

MDN Documentation on display: none

演示

#image1 {
  display: none;
}
#box1:hover > img {
  width: 200px;
  height: 200px;
  display: block;
}
.box {
  float: left;
  height: 200px;
  width: 200px;
  margin: 10px;
}
#box1 {
  background-color: #51a3a3;
}

<section id="work">

  <div class="box" div id="box1">
    <img id="image1" src="http://truestorieswithgill.com/wp-content/uploads/2013/09/20130915-190532.jpg">
  </div>
  <div class="box" div id="box2">
    <img src="images/cms_lmadesign.png">
  </div>
  <div class="box" div id="box3">Content for class "box" Goes Here</div>
  <div class="box" div id="box4">Content for class "box" Goes Here</div>
  <div class="box" div id="box5">Content for class "box" Goes Here</div>
  <div class="box" div id="box6">Content for class "box" Goes Here</div>

</section>

【讨论】：

【解决方案2】：

您应该在 div 而不是图像上添加悬停。

#box1:hover #image1 {
    display:inline;
}

Working example

【讨论】：

【解决方案3】：

加载时，您调用#image1 {display:none;}，因此您的图片无法悬停。
要处理 div 鼠标移动，你必须写 #box1:hover #image1 因为#image1:hover 处理图像鼠标移动

结果是

#image1 {
  display:none;
}

#box1:hover #image1{
  display:inline;
}

.box {
  float:left;
  height:200px;
  width:200px;
  margin:10px;
}

#box1 {
  background-color:#51a3a3;
}

<section id="work">

  <div class="box" div id="box1"> <img id="image1" src="images/photography_lmadesign.png"></div>
  <div class="box" div id="box2"><img src="images/cms_lmadesign.png"></div>
  <div class="box" div id="box3">Content for  class "box" Goes Here</div>
  <div class="box" div id="box4">Content for  class "box" Goes Here</div>
  <div class="box" div id="box5">Content for  class "box" Goes Here</div>
  <div class="box" div id="box6">Content for  class "box" Goes Here</div>

</section>

【讨论】：

不错，但如果您提供实时图像链接而不是静态链接，那就太好了。谢谢

【解决方案4】：

您也可以尝试使用z-index。还要为您的图像alt 属性赋值。

#image1 {
    position: relative;
    z-index: -1;
}

#box1:hover img {
    z-index: 1;
    background-color: #CCC;
}

.box {
    float: left;
    width:200px;
    height:200px;
    margin:10px;
}

#box1 {
    background-color:#51a3a3;
}

<section id="work">

    <div class="box" div id="box1"> <img id="image1" src="images/photography_lmadesign.png" alt="Image 1" /></div>
    <div class="box" div id="box2"><img src="images/cms_lmadesign.png" alt="Image 2" /></div>
    <div class="box" div id="box3">Content for  class "box" Goes Here</div>
    <div class="box" div id="box4">Content for  class "box" Goes Here</div>
    <div class="box" div id="box5">Content for  class "box" Goes Here</div>
    <div class="box" div id="box6">Content for  class "box" Goes Here</div>

</section>

【讨论】：