是否可以通过CSS3？或者我需要JavaScript？

嘿，我刚刚开始徘徊在悬停和图像周围，很高兴知道这一点。是否可以通过CSS3？或者我需要JavaScript？

其实我来到一个问题，CSS3

我在想，如果所有其他的图像可以保持完整无当我将鼠标悬停在他们移动。我试过在CSS3中寻找东西，但没有出现。

我有一个图像悬停高达200px的宽度和高度。我想知道当图像变大时是否所有其他图像都可以保持不变。

反正这是我的CSS

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

} 

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

#container li{ 
    float:left; 
    margin: 30px; 
    list-style-type:none; 
    cursor:pointer; 
} 



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

和我的HTML

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

来源

2014-01-28 user2805313

这也是我的网站http://codepen.io/willc86/pen/BrEmt – user2805313

这里是你可以做的是将影响至少变化：使流量停留在改变徘徊图像边缘相同：

#container img:hover{ 
    filter:grayscale(0%); 
    -webkit-filter: grayscale(0%); 
    opacity: 2; 
    width:200px; 
    height:200px; 
    margin: -50px; /*this will make the image seem to be 100px by 100px*/ 
}

这是您的网站的工作版本：http://codepen.io/anon/pen/Dsblw它只是有一行更改margin: -50px。

来源

2014-01-28 23:13:37

我会留下我的答案了，但我更喜欢你的！ –

我给你li相同的宽度作为初始图像，然后广告position:abolute到悬停伪类

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

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

http://codepen.io/anon/pen/Ecuby

来源

2014-01-28 23:21:21

这使得它们向左和向下弹出。我相信他希望他们能够在各个方向平等地出现。居中。 –

@DamienBlack我不会做出这样的假设，我只是在OP示例中以这种方式扩展，但移动周围的元素并修复它，使其他元素不移动。尽管如此，你的解决方案对我来说更加灵活。 –

我会使li是position:relative，并有width和height的形象。

img.size应该是position:absolute并在悬停时调整其大小和边距以居中。

使用绝对定位，并从流中去除它允许
演示在http://codepen.io/anon/pen/EisIK

另外opacity从0到1许多效果等的调整大小转换..所以使用图2是与1相同

或者，您可以只使用transform:scale(2);这不会影响流量..
演示在http://codepen.io/anon/pen/jkapL

来源

2014-01-28 23:29:59

除非您还添加了-webkit-transform：scale（2）;否则该选项将无法在Chrome或Safari中使用。IE9需要-ms-transform：scale（2）。 –

是的..我只是提供了与标准属性展示的概念.. –

是否可以通过CSS3？或者我需要JavaScript？

回答

相关问题