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时显示image，请使用以下代码：

.widget_sp_image:hover .widget_sp_image-description

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

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

工作演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先请指定要显示的div，然后在 .widget_sp_image之后添加div类：hover

就像那样：

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

然后添加css display：block;

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: