嘿伙计们，我很想保持我的 CSS 图像和链接不动。我有我的相对位置，但仍然移动。这是为什么。
我也试过绝对的，但是当我尝试添加宽度和高度时，它不会让步。
当我将鼠标悬停在图像和链接上时，我非常想保持图像和链接静止不动。当我使用相对位置时，我认为一切都是正确的？
这是我的代码笔 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>
最佳答案
不要在悬停样式上设置宽度。
#box li:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
opacity:1;
}
关于javascript - 为什么我的 CSS 图像不会保持静止？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21471596/