Cómo lograr el efecto expandir/encoger enlace

[neodani]

Buenas,

Dispongo de una barra horizontal con unos enlaces en forma de lista tipo así

Código HTML:

<div class="ordenacion">Ordenar por:<ul><li><a href="#">Categoria A</a></li>/<li><a href="#">Categoria B</a></li>/<li><a href="#">Categoria C</a></li>/<li><a href="#" class="activo">Categoria D</a></li>/<li><a href="#">Categoria E</a></li>/<li><a href="#">Categoria F</a></li></ul></div>
 

Como así queda muy largo, había pensado ponerlos de tal forma que quedasen así, encogidos

Ordenar por: A / B / C / D / E / F

Pero que al pasar por encima de cada uno se fueran desplegando y/o encogiendo cuando no estuvieras encima.

Ordenar por: A / B / C / Categoria D / E / F

Pero no se cómo lograr ese efecto. ¿Alguien me puede orientar?

Muchas gracias de antemano!

[IsaBelM]

puedes usar el pseudo elemento :before

[YYs86]

Puedes hacerlo con jquery de una forma fácil.

Código Javascript:

$('.item-menu').mouseover(function(){
  $(this).parent().find('span').show();
}).mouseout(function(){
  $(this).parent().find('span').hide();
});
 

Código HTML:

<div class="item-menu">Opción 1<span style="display: none">Lo que quieras mostrar</span></div>
 

[IsaBelM]

Iniciado por YYs86

Puedes hacerlo con jquery de una forma fácil.

como decimos por aquí, esto es para mear y no echar ni gota. estamos en el foro de css, no de javascript. y encima recomiendas usar una librería!!!

[neodani]

Lo he probado cómo dices YYs86 ya que no he consigo hacerlo de la forma que decía IsaBelM, pero claro al pasar por encima de cualquiera de ello me muestra el texto oculto de todos los span, no sobre el que estoy encima, hay alguna forma de diferenciarlo?

Código HTML:

<div class="ordenacion">Ordenar por:<ul>
<li>R<span style="display: none">elevancia</span></li>/<li>R<span style="display: none">aking</span></li>
</ul></div>
 

Código Javascript:

$('.ordenacion').mouseover(function(){
$(this).parent().find('span').show();
}).mouseout(function(){
$(this).parent().find('span').hide();
});
 

Muchas gracias de antemano

[IsaBelM]

y por eso te lanzas a usar una librería??

a ver así

p:hover:before {content: "Tipo: "}

<p>texto plano</p>

[neodani]

Conseguido con

$('.ordenacion li').mouseover(function(){
$(this).find('span').show();
}).mouseout(function(){
$(this).find('span').hide();
});

Pero no me acaba de gustar mucho el efecto al pasar por encima de ellos, si vas uno a uno no queda mal, pero a la que recorres varios a la vez con el cursor el efecto gusta. Es demasiado rapido el mostrar y esconder

[YYs86]

Puedes ponerle un delay al efecto...

Y si fue culpa mia ponerle el .parent() pensaba metertelo dntro de otro <div> mas xD

Código Javascript:

$(this).find('span').show("slow");
 

[kseso?]

No me lo puedo creer.
¿Qué será lo próximo?
¿no sólo js, toda una librería para un simple a span {display: none} a:hover span {display:...}?

Esperando la próxima sorpresa... tic tac tic tac...

[neodani]

Gracias a todos por vuestras respuestas, despues de ver las funcionalidad he acabado implementado lo siguiente, aunque me pregunto si este mismo efecto lo podría hacer solo con CSS, ya que no lo creo

<div class="ordenacion">Ordenar por: <span id="torden" style="display: none;">Categoria3</span><ul>
<li id="Categoria1">A</li>/
<li id="Categoria2">B</li>/
<li id="Categoria3">C</li>/
</ul>
</div>

Y el funcionamiento es el siguiente

Ordenar por: [nombre del metodo de ordenacion seleccionado con hover encima de la A, B o C y que va cambiando segun pases el raton por cada uno de ellos] A / B / C

Muchas gracias

[furoya]

Una de dos : o se mueve el tema a Javascript, o se banea a esta gente por desubicada.
O ambas.

Creí recordar que ya se había mencionado el asunto antes. Al fin lo encontré, pero no estoy seguro de que aún funcione. No quise perder el tiempo probando y que alguien me ganara de mano poniendo el mismo enlace.

Enlaces largos





Edición :

... o poniendo otro mejor

Abreviar texto dentro de celda