Question

我试图在css3中的nvidia页面（http://www.nvidia.com/object/cool_stuff.html）上做一些悬停效果，结果在这里http://www.html5.ssl2.pl/。现在，你可以看到它不能正常工作 - 当你将悬停一个div，所有其他人将移动，边界也有问题（提供更多空间）

代码：

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

知道如何解决这个问题吗？谢谢你的帮助。

Answer 1

试试这个 - 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; }

Answer 2

尝试将其位置设为绝对而非相对。

虽然您链接的nvidia页面在flash中执行此操作，但您仍然可以使用某些jQuery实现您在css3中所做的操作。

Answer 3

这是一个不使用绝对定位的尝试：jsfiddle

不太对......

Answer 4

您需要将其位置设置为 relative ，但您还需要在为边框设置动画的同时为该位置设置动画。

因为您正在使用边框进行动画制作，所以您必须在相反的方向同时更改位置，这样它们才会取消边框的移动。

他们越来越不合理的原因是他们实际上变得越来越大，越来越远离他们原来的位置。

尝试添加：

position: relative; 
right: 5px;
left: 5px;

到div.nowy:hover班级，或者你在做边界动画的地方。

在css3中有漂亮的悬停效果

4 个答案: