当使用CSS3或JavaScript单击此CSS按钮时，我如何“突出显示”此CSS按钮？

Question

在HTML页面中，我有两个按钮，如下所示：

<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi">
    <div class="news_box news_box_01 hvr-underline-from-center " style="margin-right: 50px;"></div>
</a>

<!-- Bottone relativo ai progetti PNSD: -->
<a title="PNSDe" href="javascript: void(0)" id="showPnsd_${item.index}" class="showPnsd">
    <div class="news_box news_box_02 hvr-underline-from-center "></div>
</a>

这是相关的CSS，显示了实现该按钮的div的背景信息：

.news_box_01 {
    background: rgba(0, 0, 0, 0) url("../../img/icons/projects/wifi_big_transparent_2.png") repeat scroll 0 0;
}

.news_box_02 {
    background: rgba(0, 0, 0, 0) url("../../img/icons/projects/PNSD.png") repeat scroll 0 0;  
}

好的，现在我的问题是，当用户单击它时，我必须突出显示所选的按钮。

我知道我可以使用:active选择器来选择单击的链接。问题是，当单击链接时，我不知道如何使用CSS来“高光”(或实现其他CSS 3效果)。

你有什么主意吗？

Answer 1

如果我正确地理解了，您希望在单击后应用更改。

$(".showWifi").on("mousedown", function() { 
    //fires when the mouse is press down
    //using "click" instead of "mousedown" means the mousebutton 
    //must be pressed down then up before the function fires.

    $(this).addClass("highLightButton");

})

不要犹豫，要求进一步的解释或帮助

Answer 2

使用:活动的锚元素

a:active {/*styles here*/}

http://codepen.io/anon/pen/JYYGLG

Answer 3

在css中使用:active选择器：

a:active .news-box{
/*
Some magic code to make a nice background!
*/
}

因此，每当您的a处于活动状态时，上面的css将应用于该a的.news-box子级。

编辑：

你的魔法代码可以是这样的：

a{
  width:100px;
  margin:10px;
  border:1px solid #ddd;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  color:#fff;
  }
.news-box{
  
  padding:10px;
  background-color: #21B4C3;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
}
a:active .news-box{
 -webkit-animation: magicbg .92s infinite;
  -moz-animation: magicbg .92s infinite;
  -o-animation: magicbg .92s infinite;
  animation: magicbg .92s infinite;  
}

@-webkit-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-o-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-moz-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
@-keyframes magicbg {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}

<a href="#">
<div class="news-box">Button1</div>
</a>
<a href="#">
<div class="news-box">Button1</div>
</a>

​