Question

我有一个跨度，目前没有边界。

<span> My Span </span>

当用户点击跨度时，跨度周围会出现蓝色边框，然后边框会在1秒内缓慢消失

以下是我的CSS

span
{
    margin : 20px;
    min-width: 150px;
    border-radius:5px;  //rounds corners for other browsers
    color:white;
    font-weight:bold;
    background-color:WHITE;
    padding:10px;


-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;

}

span a:click 
{
background-color: BLUE;
}

感谢Stack Overflow的CSS3专家！

Answer 1

使用:active

span:active{
background-color: BLUE;
}

DEMO此处

Answer 2

首先，您需要CSS来定位'span'，而不是'span a'，因为span元素不包含子'a'

如Ashish所述，您需要使用:active

我认为你正试图改变边界，而不是背景。您可以使用转换。

     transition : border 1s ease; 
      -webkit-transition : border 1s ease; 
      -moz-transition : border 1s ease;
      -o-transition : border 1s ease; 
}
    span:active{
    border: 5px solid blue;
}

请看这里：http://jsfiddle.net/doqundnp/

仅在鼠标按钮关闭时才进行转换。

Answer 3

如果您想要淡化边框，可以使用jquery和css：http://jsfiddle.net/qw0jq6th/1/

Jquery的：

$('span').click(function () {
    $(this).addClass("blue").delay(1000).queue(function (next) {
        $(this).css('border', '1px solid transparent');
        $(this).removeClass("blue");
        next();
    });
});

CSS：

span {
    margin : 20px;
    min-width: 150px;
    border-radius:5px;
    font-weight:bold;
    padding:10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all 1s ease;
}
.blue {
    border: 1px solid blue !important;
}

这需要什么CSS3或jQuery？

3 个答案: