当用户将鼠标悬停在图像上时试图显示 div？

Question

我显示了一组图像，当用户将鼠标悬停在它们上方时，我想要一个带有图像描述的小型透明 div。只有在悬停时。

尝试：描述 div .widget_sp_image-description 不显示，当用户悬停时显示以阻止 position: absolute。

问题：将鼠标悬停在图像上时没有任何反应。我在这里做错了什么，想法？

HTML

<section id="widget_sp_image-7" class="widget widget_sp_image">
<img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
<div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br>
            Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj  ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br>
            Project Cycke: 2012- 2014</p>
</div>

css

/* Image Widget Images Container */
.widget_sp_image {
    position: relative;
}
.widget_sp_image-description {
    display: none;
 }

.widget_sp_image-description:hover {
    display: block;

    background-color:rgba(251, 194, 40, 0.54);
    color: white;
    position: absolute;
    top: 1px;
    width: 100%;
    min-height: 426px;
}

Answer 1

请先指定要显示的 div，然后在 .widget_sp_image:hover

之后添加该 div 类

像这样：

.widget_sp_image:hover .widget_sp_image-description {....}

然后添加 css display: block;

.widget_sp_image {
  position: relative;
}
.widget_sp_image-description {
  display: none;
}

.widget_sp_image:hover .widget_sp_image-description {
  display: block;
  
  
  background-color: rgba(251, 194, 40, 0.54);
  color: white;
  position: absolute;
  top: 1px;
  width: 100%;
  min-height: 426px;
}

<section id="widget_sp_image-7" class="widget widget_sp_image">
  <img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
  <div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br> Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br> Project Cycke: 2012- 2014</p>
  </div>
</section>

Answer 2

若要在悬停相应的image 时显示div，请使用以下代码：

.widget_sp_image:hover .widget_sp_image-description

为什么你的代码不起作用？

您使用了以下代码：.widget_sp_image-description:hover 当您将鼠标悬停在 div 本身上时，它会显示 div，但是当 div 不显示时，您无法将其悬停。

工作演示

.widget_sp_image {
  position: relative;
}

.widget_sp_image-description {
  display: none;
}

.widget_sp_image:hover .widget_sp_image-description {
  display: block;
  background-color: rgba(251, 194, 40, 0.54);
  color: white;
  position: absolute;
  top: 1px;
  width: 100%;
  min-height: 426px;
}

<section id="widget_sp_image-7" class="widget widget_sp_image">
  <img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
  <div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br> Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br> Project Cycke: 2012- 2014</p>
  </div>
</section>

<section id="widget_sp_image-7" class="widget widget_sp_image">
  <img width="735" height="426" class="attachment-735x426" style="max-width: 100%;" src="http://localhost/wordpress/wp-content/uploads/2017/11/project1-1.jpg">
  <div class="widget_sp_image-description">
    <p>Company Name: ELES AINC<br> Objective: Blah las lkajsd lkjsad lkasdjalk asdlk jkj ljsdaj llasdlkj laksdjas lkajsd la ljskda lakjsd kjks k jkjkjkjk lkjsdks.<br> Project Cycke: 2012- 2014</p>
  </div>
</section>