jquery - ejemplos - El problema con el efecto "ui-state-hover"

tooltip jquery

Question

Tengo un html

  <div class="portlet-header">
         <a href="#" class="ui-icon ui-corner-all ui-state-default">
              <span class="ui-icon ui-icon-minusthick ui-corner-all"></span>
         </a>
   </div>

Quiero que el ancla tenga efecto de desplazamiento, así que agrego este javascript:

$(".portlet-header").hover(function()
{
    $(this).find("a")
        .removeClass("ui-state-default")
        .addClass("ui-state-hover");
},function(){……});

pero el estado "ui-state-default" o "ui-state-hover" del ancla no funciona así:

Quiero el efecto como el jquery ui diálogo demo oficial (Sí, el tema es diferente) ......

Entonces, ¿cómo puedo resolver este problema? Hacer un efecto de desplazamiento hacia la derecha

Answer 1

Puede hacer esto completamente en CSS usando un: selector de desplazamiento. Es decir:

.portlet-header a { ... };
.portlet-header a:hover { /* hover behavior */ }

Dependiendo de dónde desee que ocurra el vuelo estacionario, podría mover la línea de vuelo estacionario. Lo siguiente cambiaría el estilo del enlace cuando el encabezado estaba suspendido (y no solo el enlace):

.portlet-header:hover a { ... }

Si usa jQuery, puede simplificar su selector:

$(".portlet-header a").hover();

Esto es equivalente