0

だから私は私のウェブページに私のイメージを持っています。私のcssコードでは、:hover（グローが表示されます）のトランジションがあり、正常に動作し、にストロークを追加したいと考えてい:activeます。これが私のコードです:

#bb
{
    top: 55%;
    left: 6%;
    opacity: 0.85;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#bb:hover
{  
    opacity: 1;
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
    opacity: 1;
    border: 10px solid rgba(87,87,87,0.8);
}

私の問題は次のとおりです。画像を移動せずにストロークを画像の周りに表示するにはどうすればよいですか?また、画像をクリックしたままにせずにストロークを「アクティブ」に保つにはどうすればよいですか?

4

2 に答える 2

2

You can use CSS box-sizing:border-box;. Write like this:

#bb:active
{
    opacity: 1;
    border: 10px solid rgba(87,87,87,0.8);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

Check this http://jsfiddle.net/4g6d9/

于 2012-06-07T05:22:40.550 に答える
2

境界線はスペースを占有するため、通常、境界線を追加すると要素が移動します。outlineの代わりに プロパティを使用するとborder、置き換えは行われませんが、アウトラインは同じ場所に表示されるものの上に表示されます。つまり、他のコンテンツを覆う可能性があります。

の意味は、:activeブラウザによって解釈が異なります。キーボードまたはマウスのイベントで特定のことを (可能な限りクロスブラウザーで) 発生させるには、JavaScript を使用する必要があります。

于 2012-06-07T05:23:10.823 に答える