Question

问题是当我将鼠标悬停在图像上时没有任何反应。我在其他网站上使用了模拟代码，一切正常。我不知道这个问题是什么

这是我的css：

＆＃13;

   .gallery {
     padding-left: 10px;
   }
   .gallery img {
     width: 300px;
     height: 205px;
     float: left;
     margin: 10px 10px;
   }
 }
 .gallery img:hover {
   transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
   -moz-transform: scale(1.2, 1.2);
   -o-transform: scale(1.2, 1.2);
   -ms-transform: scale(1.2, 1.2);
   transition: all 0.3s ease;
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
 }

＆＃13;

<div class="gallery">
  <a target="_blank" href="#">
    <img src="images/auto2.png" alt="">
  </a>
</div>

＆＃13;

Answer 1

你有一个额外的括号}

＆＃13;

.gallery {
  width: 300px;
  height: 205px;
  margin: 10px 10px;
  border: 1px solid red;
  overflow: hidden; /* so that the image hide when hovered */
}
.gallery a {
  display: block; /* set a to display block */
}
.gallery img {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.gallery:hover img {
  transform: scale(1.2, 1.2);
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
}

＆＃13;

<div class="gallery">
  <a target="_blank" href="#">
    <img src="http://placeimg.com/300/205/any" alt="" />
  </a>
</div>

＆＃13;

图像悬停不起作用css3

1 个答案: