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

Question

into an HTML page I have 2 buttons implemented by something like this:

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

And this is the related CSS that show a background immage to the div implementing the button:

.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;  
}

Ok, now my problem is that I have to highlight the selected button when the user click on it.

I know that I can use the :active selector to select a clicked link. The problem is that I don't know how can I use CSS to "hightlight" (or implement some other CSS 3 effect) on the backround immage when the link is clicked

Do you have some idea?

Answer 1

If i understood correctely, you want to apply changes for after a click.

$(".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");

})

don't hesitate to ask for further explanation or help

Answer 2

use :active for anchor elements

a:active {/*styles here*/}

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

Answer 3

Use :active selector in your css:

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

so whenever your a is active, the css above will be applied to the .news-box child of that a .

Edit:

Your magic code can be something like this:

 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>