css3中不错的悬停效果答案

【问题标题】：Nice hover effect in css3css3中不错的悬停效果
【发布时间】：2012-02-29 11:08:06
【问题描述】：

我试图在 css3 中的 nvidia 页面（http://www.nvidia.com/object/cool_stuff.html）上做一些悬停效果，结果在这里http://www.html5.ssl2.pl/。现在你可以看到它不能很好地工作 - 当你将悬停一个 div 时，所有其他 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>

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

【问题讨论】：

标签： css hover border effect

【解决方案1】：

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

不太对...

【讨论】：

【解决方案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; }

【讨论】：

哇，结果很完美。个人比较喜欢原版的
@Amay 我不确定你是否知道这一点，但这些都不会在任何版本的 IE 中动画...你最好使用 jQuery。
@StefanNch 哇！这个 Vanilla 框架看起来很酷！它看起来非常有用，但很有趣......当将它与 JQuery 进行比较时，它们似乎没有显示动画？还是跨浏览器兼容性？另外，您似乎需要包含一个原型，只是为了按类选择？我知道 JQuery 在很多情况下被过度使用，但不是动画......我明白了，做一个纯粹主义者很有趣，特别是如果你的名字是 Stefan，并且可以在你维护的小博客上正常工作，但我们大多数人都有一个还有很多工作要做。
@MikeyG 哦！.. 我不知道使用 javascript 会让我成为一个纯粹主义者（你不是很有礼貌吗？），或者我维护了一个小小的博客。祝你在繁忙的日程中好运，这会阻止你编写跨浏览器兼容的 setInterval 函数。我（有点）注意到你确实有时间在一个两年前的问题上发帖。生活一定对你很苛刻，我不打倒在地上的人！
@StefanNch 使用框架是制作任何类型的真实动画（除了尚不支持的 CSS3 动画）的唯一有效方式。如果您不同意这一点，那么您显然没有自己做过任何动画。为什么你这么反对使用 JQuery 来做一些小事呢？普通的 javascript 总是会更高效，但如今效率已远不如其他人阅读和维护代码的直观程度重要。这就像无缘无故地告诉某人使用 C++ 而不是 Python，而且很烦人。

【解决方案3】：

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

因为您正在使用边框进行动画，所以您必须同时在相反方向上更改位置，因此它们会抵消您边框的移动。

它们之所以变得异常，是因为它们实际上变得越来越大，并且离原来的位置越来越远。

尝试添加：

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

到div.nowy:hover 类，或者您正在为边框制作动画的任何地方。

【讨论】：

嗯...举个例子？ :] 我应该只对“左”使用过渡吗？

【解决方案4】：

尝试将它们的位置设置为绝对而不是相对。

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

【讨论】：

我固定了位置：相对和绝对。现在需要边界方面的帮助。
@Amay 看看我的回答。看起来这个位置会立即变成动画，所以它看起来仍然有点波涛汹涌。我没有用 css3 做足够多的动画来知道为什么会这样。
你可以给它一个与悬停效果相同宽度的左上边框和与背景颜色相同的边框。这是解决此问题的最简单方法。不过可能有更好/更难的方法
@Mikey G 我明天试试。 Roozbeh15 这是我的第一个想法，但正如您所见，我添加了一些框阴影，因此即使您将边框更改为背景色，您仍然可以看到边框