Question

当鼠标移动和点击项目时，我想要一个标记类为灰色（带有圆角边框）的项目。

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

我希望这会产生预期的结果，（标签：悬停按预期工作，但标签：活动不会）：

.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/

Answer 2

您为两个伪类定义了相同的CSS样式。 :active元素通常也会:hover（取决于浏览器），因为当鼠标按钮在元素上按下时，它会被应用。

如果您希望在单击并离开元素时保持应用样式，则需要使用JavaScript，或者为元素赋予tabindex属性并使用{{1伪类。使用@ Marnix的测试用例，例如http://jsfiddle.net/r4gQQ/1/。

Answer 3

首先，你的：hover和：active状态的CSS是相同的，所以你不会看到任何变化！

根据w3.org上的CSS规范，：active只用于应用CSS1中的超链接，但现在已经不再适用了。我找不到任何关于它现在适用的元素的明确陈述，所以我只是假设它适用于所有地方，除非别人知道更好。它可能仍然只适用于用户通过点击“激活”的元素，例如链接和表单按钮。

如果：active确实现在适用于任何类型的元素，那么上面的CSS应该可以按你的需要工作，只要你将：active样式改为：hover样式当然不同！

如果没有，那么CSS中仍然存在限制，你可以在哪里使用悬停，或者你的浏览器的CSS引擎中有一个错误限制了你可以应用：活动样式的方式违背当前的CSS规范。如果是后者，则可以使用javascript将mousedown上的类添加到单击的元素，并在mouseup或mouseout上再次删除它。然后，您可以正常在CSS中设置活动类的样式。

将CSS主动工作在非链接元素上

3 个答案: