单击图像时保持悬停状态

Question

我需要在此代码中添加功能，当单击按钮时，它会保持悬停状态（彩色） 有人可以帮我弄这个吗？非常感谢。

<style>
menucko a { position: relative; left: -210px; transition: left .25s ease-in-out; -moz-transition: left .25s ease-in-out; -webkit-transition: left .25s ease-in-out; } 
menucko a:hover { position: relative; left: 0px; }

bannerik div { margin-left: 2px; border-left: 4px solid #E5D96D; }
</style>

<menucko>
<a href="http://www.bieladuha.sk/kreativne-potreby-akcie"><img class="fade" src="http://www.webareal.sk/fotky25131/web/kreativne-potreby-akcia.jpg" alt="" width="400" height="40" /></a>
</menucko>

http://jsfiddle.net/WgdXU/50/

Answer 1

您可以使用 javascript/jQuery 向锚标记添加一个类

$('menucko a').on('click', function () {
  $(this).addClass('hovered');
});

然后您可以将 hovered 类添加到您的 css 中

menucko a:hover, menucko a.hovered { position: relative; left: 0px; }