Question

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

＆＃13;

while(true)
{
    //something
}

＆＃13;

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

＆＃13;

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

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>

Answer 2

you can try this also

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

}


.img_img:hover{
    -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>

灯箱悬停不能正常工作

2 个答案: