為什么我的CSS圖像不會靜止不動？

Question

大家好，我想保持我的CSS圖片和鏈接靜止不動。 我有相對的職位，但仍然在移動。 這是為什么。

我也嘗試將它們絕對化，但是當我嘗試增加寬度和高度時，它不會讓步。

當我將圖像懸停在圖像上時，我幾乎要嘗試使其保持靜止並保持鏈接狀態。 當我使用相對職位時，我認為一切都正確嗎？

這是我的codepen http://codepen.io/willc86/pen/Kpxqk

和我的代碼

*{
  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

不要在懸停樣式上設置寬度。

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

Answer 2

嘗試將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