css - CSS 是否会在非链接元素上有效工作

Question

我希望具有标签类的元素在鼠标移过和单击元素时变灰(带有圆形边框)。

示例元素可能如下所示 <span class="tag">Some value</span>

我希望这会产生预期的结果，(tag:hover 按预期工作，但 tag:active 没有):

.tag{
    }

.tag:hover{
    background:#CCC;
    padding:4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;     
}

.tag:active{
    background:#CCC;
    padding:4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
    border-radius: 4px;         
    }

Answer 1

您可以使用 jQuery 将类永久添加到您的 span。你可以这样做:

.tag:hover, .tag.everclicked{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px; 
-moz-border-radius: 4px;
border-radius: 4px;         
}

在 jQuery 中:

$(document).ready(function()
{
    $('.tag').click(function()
    {
        $(this).addClass('everclicked');
    });
});

http://jsfiddle.net/r4gQQ/2/