div中的背景更改

我想在点击div后留下背景色。div中的背景更改

这个div链接到另一个目标div。

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

这里是div的CSS我点击

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

所以我想的背景颜色保持它的点击时。

来源

2013-04-29 Andrew Kilness

我也有这些CSS中的转换 .barbutton：target { \t background-color：＃7BDFBE; } .barbutton：active { \t background-color：＃7BDFBE; } .barbutton：focus { \t background-color：＃7BDFBE; } .barbutton：visited { background-color：＃7BDFBE; 和他们都没有工作:( – 2013-04-29 18:18:38

我认为你试图达到的是正常的链接行为，即它改变颜色并保持这种方式来表明它已被访问。如果是，那么你在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; 
}

同样，添加等环节规定您需要。

来源

2013-04-29 18:38:15

为了保持你想要的状态，我会建议使用一些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样式可以使背景持续存在。

编辑/注：

拉维的回答是更好，因为它不使用JavaScript。如果你不停的HTML布局，你拥有了它，在CSS声明必须是：

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

而且，这种方式将使风格坚持只要在浏览器记住该链接已被访问（用户来早在3天后，背景颜色可能仍然存在）。我上面的方式不会保持用户刷新或离开页面后的背景。我想这取决于你要做什么。

来源

2013-04-29 19:04:05

div中的背景更改

回答

相关问题