javascript - 试图在用户将鼠标悬停在图像上时显示 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

要在悬停相应的 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>