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

你可以使用 CSS box-sizing:border-box; . 像这样写：

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

检查这个http://jsfiddle.net/4g6d9/

于 2012-06-07T05:22:40.550 回答
2

边框占据空间，因此添加边框通常会替换元素。如果您使用该outline属性而不是border，则不会发生位移——但轮廓将出现在任何原本会出现在同一位置的内容之上，即可能覆盖其他内容。

的含义:active在不同的浏览器中有不同的解释。要使键盘或鼠标事件发生特定的事情（尽可能跨浏览器），您需要使用 JavaScript。

于 2012-06-07T05:23:10.823 回答