所以我的网页上有我的图片。在我的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);
}
我的问题如下:如何在不移动图像的情况下使图像围绕显示,以及如何让它保持“活动”而不必按住图像?
答案 0 :(得分: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;
}
答案 1 :(得分:2)
边框占用空间,因此添加边框通常会替换元素。如果您使用outline
属性而非border
,则不会发生位移 - 但轮廓将出现在原本会出现在同一位置的任何内容之上,即可能会覆盖其他内容。
:active
的含义在不同的浏览器中有不同的解释。要在键盘或鼠标事件上发生特定事情(尽可能跨浏览器),您需要使用JavaScript。