no funca enlace :active, :hover

[climax2006]

Hola:
tengo una imagen con 2 iconos en esa imagen(uno activo, otro inactivo), al hacer el :hover me cambia activo, pero al hacer :active me funka solo al hacer click, pero se me cambia el estado y se pone inactivo,¿como puedo dejar permanente el active para que no cambie y si cambio al otro boton uno quede inactivo y el otro activo?

Código PHP:

  <style type="text/css">
 
a.button span { 
    background: transparent url(iconos/prod.png) no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 55px;
}
 
a.button:active span, a.button:hover span { 
    background-position: bottom left; 
    padding: 55px; /* push text down 1px */ 
    display: block; 
    line-height: 14px; 
}
</style>
 
...
<a href="#" class="button"><span>1</span></a>
<a href="#" class="button"><span>2</span></a> 
   

[Mikmoro]

Prueba con a.button:focus

[alexk]

:focus
hasta donde yo se aun no funciona en safari y chrome...

lo mejor seria crear una clase de mas...
<a href="#" class="button"><span class="active">1</span></a>

[hwelt]

no amigo alexk ... el :focus funciona perfecto en Firefox 3.5 y creo que también en ie7 e ie8.

Pero igual el focus no te cambia por click el estado solo se ve cuando arrastras un poco el enlace o boton y luego lo sueltas ves que te queda así pero si le das clic vovería a cargar la pagina y entonces vuelve a su estado normal.. lo quería saber yo ( y me imagino que climax2006 también estaría deacuerdo conmigo) esque si alguien de buena onda nos comparta una onda que al hacer click guarde a cache el estado .active y que al hacer otro click sobre otro elemento del menu (o boton.. lo que sea) cambie el estado al nuevo click y que desactive el otro..

no se uds.. pero he visto un sitio muy interesante... (no lo explica solo vi el template y como conozco el CMS sé que no tiene capacidad de agregar un class .active) pero vi que este si "retenia el class .active" entonces vi su codigo fuente y lo posteo aqui opinen uds. y expliquen :D....
HTML:

<div id="header">
<div id="topline"></div>
<div id="topmenu">
<ul>
<li><a href="/">Главная<span>вернуться на главную</span></a></li>
<li><a href="/">Новости<span>новости сайта</span></a></li>


<li><a href="/reg.html">Регистрация<span>стать пользователем сайта</span></a></li>

<li><a href="/feedback/">Контакты<span>связь с нами</span></a></li>
<li><a href="/about.html">О нас<span>подробнее о нас</span></a></li>

</ul>
</div>
</div>

JAVASCRIPT:

$(document).ready(function() {
$('#tabbed > ul, #tabbed2 > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
$('#headertab > ul').tabs({ fx: { opacity: 'toggle' } });
var elts = $('#topmenu ul > li');
var options = { path: '/', expires: 10 };
if($.cookie("activeMenu")) {
var x = $.cookie("activeMenu");
$("#topmenu ul li:eq("+ x +")").addClass("current");
}

$("#activeMenu").click(function () {
var getLi = $.cookie("activeMenu");
alert("Cookie activeMenu: " + getLi);
});

// lava menu
$("#topmenu ul").lavaLamp({
fx: "swing",
speed: 500,
click: function() {
var x = elts.index(this);
var li = $("#activeMenu").offset();
$.cookie("activeMenu", x, options);
$(this).removeClass("current");
if($.browser.msie && $.browser.version == 6) {
//return false;
}
}
});
});

Como ven .. es javascript que añade la classe "current".. lo cual podríamos cambiar a "active" si lo queremos...

Esto es funcional.. pero fijense que necesita del todopoderoso jQuery 1.3.2 ...

compruebenlo!:..

saludos...

[alexk]

:focus funciona perfecto en Firefox 3.5 y creo que también en ie7 e ie8.

cuando dije eso???

hasta donde yo se aun no funciona en safari y chrome...

y si funciona con :focus pasate por araudi.net/