css3でニースのホバー効果

css3のnvidiaページ（http://www.nvidia.com/object/cool_stuff.html）のようなホバー効果を試していましたが、結果はhttp://www.html5.ssl2.pl/です。今、あなたはそれがうまく機能しません見ることができるように - あなたは1つのdivを置くだろうと、他のすべてが移動すると境界線（与えるより多くのスペース）との問題もあるcss3でニースのホバー効果

コード：

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

これを修正する方法はありますか？ありがとうございます。

出典

2012-02-08 Amay

これを試してみてください -

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

出典

2012-02-08 00:44:02

これは完璧だった。個人的に私は元の方が良いと思っています –

@Amayあなたがこれを認識しているかどうかわかりませんが、これはIEのどのバージョンでもアニメーション化されません... jQueryを使う方が良いでしょう。 –

@MikeyGまたはさらに[vanilla javascript]（http://vanilla-js.com/）。うーん... – StefanNch

相対的ではなく絶対的な位置を設定してみてください。

あなたがリンクしているnvidiaのページはこれをフラッシュで行いますが、あなたはcss3でやっていることを、おそらくいくつかのjQueryで達成することができます。 jsfiddle

非常に適切ではないあなたは相対に自分の位置を設定する必要があるとしているが、あなたはまた、するつもりだ...

出典

2012-02-08 00:23:23 Roozbeh15

http://jsfiddle.net/t2UCW/2/は私が位置固定：相対と絶対に。今すぐ国境の援助が必要です。 – Amay

@Amay私の答えをチェックしてください。ポジションが即座にアニメーション化されるように見えるので、やはりやや不安定に見えます。なぜ私はcss3で十分なアニメーションを行っていないのですか？ –

背景と同じ色のホバー効果と同じ幅の左上と上の境界線を与えることができます。それがこれを解決する最も簡単な方法です。しかし、より良い/より難しい方法があるかもしれません – Roozbeh15

は、絶対位置を使用せずにトライですボーダーをアニメートすると同時にポジションをアニメートする必要があります。

アニメーション用の枠線を使用しているので、逆方向に同時に位置を変更する必要があるため、枠線の動きがキャンセルされます。

彼らが実際に大きくなっていて元々あった場所から遠ざかっているからです。追加

試してください。div.nowy:hoverクラス、またはどこに境界線のアニメーションをやっている、これまでに

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

。

出典

2012-02-08 00:27:38

：ここ

出典

2012-02-08 00:28:39

うん...いくつかの例？：]私はちょうど '左'のためのトランジションを使用する必要がありますか？ – Amay

css3でニースのホバー効果

答えて

関連する問題