在CSS3中具有不错的悬停效果
[英]Nice hover effect in css3
问题描述
I was trying to do some hover effects like on nvidia page ( http://www.nvidia.com/object/cool_stuff.html ) in css3, the result is here http://www.html5.ssl2.pl/ . 
我正在尝试在css3中的nvidia页面（ http://www.nvidia.com/object/cool_stuff.html ）上做一些悬停效果，结果是在http://www.html5.ssl2.pl/上 。 Now as you can see it doesn't work well - when you will hover one div, all others will move and there is also a problem with border (giving more space) 现在，您可以看到它运行不正常-当您将鼠标悬停在一个div上时，所有其他div都将移动，并且边框也存在问题（留出更多空间）
Code: 码：
<html>
<head>
<style>
body{
background: #eee;
margin:0;
padding:0;
}
div.nowy{
position:absolute;
width:200px;
height:100px;
background:grey;
border: 0px solid #eee;
-moz-transition: border 0.2s, box-shadow 0.2s;
-webkit-transition: border 0.2s, box-shadow 0.2s;
box-shadow: 1px 3px 3px black;
}
div.nowy:hover {
border:5px solid white;
box-shadow: 0px 2px 6px black;
}
</style>
</head>
<body>
<div style="width:800px; height:300px; margin-top:50px; margin-left:50px; position:relative">
<div class="nowy" style="left:100px;"></div>
<div class="nowy" style="left:350px;"></div>
<div class="nowy" style="left:600px;"></div>
</div>
</body>
Any idea how to fix that? 任何想法如何解决？ Thanks for help. 感谢帮助。
4 个解决方案
解决方案1
4 已采纳 2012-02-08 00:44:02
Try this - http://jsfiddle.net/t2UCW/2/ 试试这个-http://jsfiddle.net/t2UCW/2/
body{
background: #eee;
margin:0;
padding:0;
position: relative;
}
div.nowy{
position: absolute;
margin-left:10px;
float:left;
width:200px;
height:100px;
background:grey;
border: 0px solid grey;
-moz-transition: border 0.5s, box-shadow 0.5s, top 0.5s, left 0.5s;
-webkit-transition: border 0.5s, box-shadow 0.5s, top 0.5s, left 0.5s;
box-shadow: 1px 3px 3px black;
}
div.nowy:hover {
border:5px solid white;
box-shadow: 0px 2px 6px black;
}
.d1, .d2, .d3 { top: 20px; }
.d1 { left: 50px; }
.d2 { left: 300px; }
.d3 { left: 550px; }
.d1:hover, .d2:hover, .d3:hover { top: 15px; }
.d1:hover { left: 45px; }
.d2:hover { left: 295px; }
.d3:hover { left: 545px; }
解决方案2
1 2012-02-08 00:23:23
Try setting their positions as absolute instead of relative. 尝试将其位置设置为绝对位置，而不是相对位置。
Although the nvidia page you linked does this in flash you should still be able to achieve what you're doing in css3 with some jQuery maybe. 尽管您链接的nvidia页面可以在Flash中做到这一点，但您也许仍然可以使用一些jQuery实现在css3中所做的事情。
解决方案3
1 2012-02-08 00:27:38
解决方案4
1 2012-02-08 00:28:39
You're going to need to set their positions to relative , but you're also going to need to animate the position at the same time that you animate the border. 您将需要将其位置设置为relative ，但还需要在为边界设置动画的同时为位置设置动画。
Because you are using border for animation, you're going to have to change the position at the same time in the opposite direction, so they will cancel out the movement of your border. 因为您正在使用边框进行动画制作，所以您将不得不同时在相反方向上更改位置，因此它们将抵消边框的移动。
The reason they are getting out of line is because they are actually getting bigger and becoming farther away from where they were originally. 他们之所以脱节，是因为它们实际上正在变得越来越大，并且与原来的距离越来越远。
Try adding: 尝试添加：
position: relative;
right: 5px;
left: 5px;
to the div.nowy:hover class, or where ever you are doing the animation for the border. 到div.nowy:hover类，或者您在哪里进行边框动画。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.