用于在悬停时显示图像的CSS代码

Question

我很擅长编码。我在悬停时显示图像时遇到问题。图像在div中。我能够隐藏它，但无法弄清楚当鼠标悬停在div上时显示图像我做错了什么。

这是课堂作业，非常感谢任何帮助。

＆＃13;

＆＃13;

#image1 {
	display:none;
}

#image1:hover {
	display:inline;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

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

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

Working example

Answer 3

• 在加载时，您拨打#image1 {display:none;}，这样您的图片就无法悬停。
• 处理div鼠标移动，你写#box1:hover #image1因为#image1:hover处理图像鼠标移动

结果是

＆＃13;

＆＃13;

#image1 {
  display:none;
}

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

您也可以尝试使用z-index。同时为您的图片alt属性赋予一个值。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;