为什么我的CSS图像不会静止不动？

Question

hey guys im tyring to keep my css images and links still. 大家好，我想保持我的CSS图片和链接静止不动。 I have my position relative, but still moves. 我有相对的职位，但仍然在移动。 Why is that. 这是为什么。

I also tried doing them absolute, but when I try to add width and height, it wont budge. 我也尝试将它们绝对化，但是当我尝试增加宽度和高度时，它不会让步。

I am pretty much trying to keep my images and link still when I hover over them. 当我将图像悬停在图像上时，我几乎要尝试使其保持静止并保持链接状态。 I thought everything was right when I use position relative? 当我使用相对职位时，我认为一切都正确吗？

this is my codepen http://codepen.io/willc86/pen/Kpxqk 这是我的codepen http://codepen.io/willc86/pen/Kpxqk

and my code 和我的代码

*{
  margin: 0px;
  padding 0px;
}
body{
  background-image: url('http://pxwallpaper.com/wp-content/uploads/2013/08/barcelona-black-new-wallpaper-94.jpg');
  background-size:cover;


}

#container{
  width: 900px;
  height: 900px;
  background-color: white;
  margin: 60px auto;
  overflow:auto;
}


img.size{

  width:100px;
  height:100px;
  -webkit-filter:grayscale(90%);
  opacity:0.4;
  transition:all 0.5s;
}

#container ul{
  margin:70px 30px 6px 10px;
}

#container li{
  float:left;
  margin: 30px;
  list-style-type:none;
  cursor:pointer;
  position: relative;
  width:100px;
  height:100px;
}



#container img:hover{
  filter:grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity: 2;
  width:160px;
  height:160px;

}




<html>
  <head>

  </head>
  <title>
  </title>
  <body>


    <div id="container">

      <ul>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrd
                rVfYtm4P73YEm9w"></li>
                <li><img class="size" src="http://kodiakherbal.com/wp-content/uploads/2013/03/canmore_rocky_mountains-hd-wallpaper.jpg"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>
                <li><img class="size" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRnNn3yg1C8fjtxGOHRLfYWRGnd-jsxPc8eZrdrVfYtm4P73YEm9w"></li>

      </ul>


    </div>



  </body>
</html>

Answer 1

Don't set the width on the hover style. 不要在悬停样式上设置宽度。

#box li:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity:1;
 }

Answer 2

try change width:220px to 200px 尝试将width：220px更改为200px

#box li:hover{

  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  opacity:1;
   width: 200px;

}

为什么我的CSS图像不会静止不动？

问题描述

2 个解决方案

解决方案1
2 2014-01-31 02:56:53

解决方案2
1 2014-01-31 02:55:01

为什么我的CSS图像不会静止不动？

问题描述

2 个解决方案

解决方案1 2 2014-01-31 02:56:53

解决方案2 1 2014-01-31 02:55:01

解决方案1
2 2014-01-31 02:56:53

解决方案2
1 2014-01-31 02:55:01