Question

我希望在点击div后保持背景颜色。

此div与目标另一个div相关联。

<a href="#aboutbody"><div class="barbutton">ABOUT</div></a>

这是div的CSS我点击

.barbutton:hover {
    background-color: #7BDFBE;
}

所以我希望背景颜色在点击时保持不变。

Answer 1

我认为你想要实现的是正常的链接行为，即它会改变颜色并保持这种状态以表明它已被访问过。如果是，那么你在CSS中以错误的方式处理问题。

而不是将CSS放在<a>标记内的新DIV上，而是将CSS放在链接本身上。

<a class="barbutton" href="#aboutbody">ABOUT</a>

然后使用CSS中的链接状态，如下所示：

a.barbutton:visited {
    background-color: #7BDFBE;
}

a.barbutton:hover {
    background-color: #7BDFBE;
}

同样，添加您需要的其他链接状态。

Answer 2

为了维持你想要的状态，我建议使用一些javascript / jQuery。

使用Javascript：

<a href="#aboutbody"><div id="barbuttonid" class="barbutton">ABOUT</div></a>

<script type="text/javascript">
    document.getElementById("barbuttonid").onclick = function() {
            document.getElementById("barbuttonid").className += " clicked";
        };
</script>

jQuery的：

<a href="#aboutbody"><div class="barbutton">ABOUT</div></a>

<script type="text/javascript">
    jQuery('.barbutton').click(function() { jQuery(this).addClass('clicked'); });
</script>

CSS：

/* anchor tags are inline and cannot contain blocks elements like divs */
#aboutbody {
    display: inline-block;
}

.barbutton:hover {
    background-color: #7BDFBE;
}

.barbutton.clicked {
    background-color: #7BDFBE;
}

现在单击它时，将添加附加类，CSS样式可以使背景保持不变。

修改/注：

Ravi的答案更好，因为它不使用javascript。如果您保留了HTML布局，那么CSS声明必须是：

a:hover .barbutton {...} a:vistied .barbutton {...}

此外，只要浏览器记住链接已被访问（用户在3天内返回并且背景颜色可能仍然存在），这种方式将使样式保持不变。一旦用户刷新或离开页面，我上面的方法就不会保留背景。我想这取决于你的目标。

div的背景变化

2 个答案: