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

Question

在 HTML 页面中，我有 2 个按钮，通过以下方式实现：

<!-- 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>

这是向实现按钮的 div 显示背景图像的相关 CSS：

.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

将 :active 用于锚元素

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>