html - 灯箱悬停无法正常工作

Question

你好，我制作了内联阻止列表，并希望让光线在图像周围悬停。它可以工作，但不是我想要的，因为光线大约占图像的一半，而且看起来不太好。也许有人可以告诉我我的 CSS 和 HTML 做错了什么，我怎样才能让那个灯箱环绕我的图像？

#planet {
   background-repeat: no-repeat;
   height: 350px;
   margin: 2px 2px 2px 2px;
   position: relative;
   width: 679px; 
}

.planet2 {
   display: inline-block;
   text-align:center;
   margin: 2px 2px 2px 2px;
}

.planet2 .img_img{
   width: 220px;
   text-align:center;
   height: 130px;
   -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
   transition: width 2s;
}

.planet2:hover > .ahove{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  -moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);
}


.planet2 .img_description {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

<div id="planet" style="background-image:url(../game/styles/images/port/rsz_senat_eo2.jpg)">
 
 <div class="planet2">
  <a class="ahove" href="">
   <img class="img_img" src="../game/styles/images/port/rsz_achiev_b.jpg"/> 
   <p class="img_description">Achievements</p>
  </a>
 </div> 
</div>

在这里，我的光悬停看起来不一样，它在图像的底部四处移动，但在我的页面中，它在左半边移动到图像中间，然后线到达图像底部的中间。

Answer 1

您必须将 .planet2:hover > .ahove 更改为 .planet2:hover > .ahove img，这样就可以了。

#planet {
  background-repeat: no-repeat;
  height: 350px;
  margin: 2px 2px 2px 2px;
  position: relative;
  width: 679px;

}



.planet2 {
  display: inline-block;
  text-align:center;
  margin: 2px 2px 2px 2px;
}

.planet2 .img_img{
  width: 220px;
  text-align:center;
  height: 130px;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;

}


.planet2:hover > .ahove img{
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  -moz-box-shadow:    0px 0px 30px 0px rgba(0, 255, 0, 0.67);
  box-shadow:         0px 0px 30px 0px rgba(0, 255, 0, 0.67);

}


.planet2 .img_description {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

<div id="planet" style="background-image:url(../game/styles/images/port/rsz_senat_eo2.jpg)">

  <div class="planet2">
    <a class="ahove" href="">
      <img class="img_img" src="../game/styles/images/port/rsz_achiev_b.jpg"/> 
      <p class="img_description">Achievements</p>
    </a>
  </div>

</div>