img:hover选中不了图片但是改成#image-1就可以,求教大神这是为啥

来源:1-4 CSS3照片墙 动画实现

不可以为空

2017-01-13 14:52

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>ss</title>

<style media="screen">

body{

  width: 100%;

}

.pic{

width: 80%;

margin: auto;


}

img{

padding: 10px 10px 15px;

border: 1px solid black;

box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.8);

-webkit-transition:1s;

-moz-transition:1s;

-o-transition:1s;

-ms-transition:1s;

transition:1s;

z-index: 500;

}

img:hover {

-webkit-transform:rotate(0) scale(1.2);

-moz-transform:rotate(0) scale(1.2);

-o-transform:rotate(0) scale(1.2);

-ms-transform:rotate(0) scale(1.2);

transform:rotate(0) scale(1.2);

z-index: 1000;

}


#image-1{

position: absolute;

top: 50%;

left: 80%;

-webkit-transform:rotate(25deg);

}

</style>

  </head>

  <body>

    <div class="pic">

      <img src="images/image1.jpg" class="image" id="image-1" alt="1">



    </div>

  </body>

</html>


写回答 关注

2回答

  • weibo_哆啦A梦有大口袋_0
    2017-03-15 09:25:04

    你的问题都没有解释清楚

  • 不可以为空
    2017-01-13 15:08:04

    自己解决了,问题在于。。。#image-1下的transform覆盖了了所有的类选择器

CSS3绚丽照片墙

CSS3属性轻松实现绚丽照片墙效果,展示不同位置不同角度多张照片

56605 学习 · 63 问题

查看课程

相似问题