CSS: Omitir subrayado en parte del enlace

¿Es posible tener un enlace contiguo, donde el texto está normalmente subrayado con el mouse sobre el mouse, pero en el medio tiene una sección (por ejemplo, una imagen) sin este subrayado? Esto no funciona:CSS: Omitir subrayado en parte del enlace

<a href="#">one <span style="text-decoration:none;">two</span> <img src="img.png" style="border:0px; text-decoration:none;"> three</a>

Fuente

2010-06-04 Biggles

Lo que realmente quería era tener una imagen "unida" a los enlaces, sin que conseguir subrayada en vuelo estacionario. Aquí es una solución que se me ocurrió:

<a href="#" style="background:url('pic.png') no-repeat; background-position: left center; padding-left: 20px;">Link</a>

padding-left es para compensar el texto para que no se solapa con la imagen de .
Con posición de fondo usted puede mover la imagen para que sea mejor alineada con el texto.
Si la imagen es más alto que el padding-top texto y padding-bottom se puede utilizar para ajustar la apariencia .

Esta técnica también se puede utilizar con sprites CSS como esto:

<a href="#" style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;">Link</a>

He utilizado una técnica similar a utilizar sprites CSS en lugar de las imágenes en línea ordinarios:

<span style="background:url('sprites.png') no-repeat; background-position: -16px -16px; padding-left: 32px;"></span>

Hope esto ayuda a alguien

Fuente

2010-07-09 12:57:19 Biggles

Envolver el texto de en un lapso y luego adjuntar la clase CSS que usa esta técnica de sprite de fondo funcionó muy bien para mí. –

<a href="#" style="text-decoration:none;"> 
    <span style="text-decoration:underline;">one</span> 
    two 
    <img src="img.png" style="border:0px; text-decoration:none;"> three 
</a>

Creo que sólo puede ser posible usando javascript de la siguiente manera.

MIRADA siguiente ejemplo

<html> 
<head></head> 
    <style> 
    a{ 
     text-decoration:none; 
    } 

    a:hover 
    { 
     text-decoration:none; 
    } 

    .sample 
    { 
     text-decoration:underline; 
    } 

    .sample_none 
    { 
     text-decoration:none; 
    } 
    </style> 
    <script type="text/javascript"> 
     function show_underline(){ 
     document.getElementById('sample').className= 'sample'; 
     } 

     function hide_underline(){ 
     document.getElementById('sample').className= 'sample_none'; 
     } 
    </script> 
    <a href="#" onmouseover="show_underline();" onmouseout="hide_underline();"> <span id="sample" class="sample_none">two</span> 
    <img src="img.png" style="border:0px;"> three 
    </a> 


</body> 
</html>

P.S. Me gustaría saber si es posible con CSS y HTML solamente

Fuente

2010-06-04 07:40:02 Salil

Esto forzará el subrayado a estar encendido todo el tiempo. Y si hago una clase especial para manejar el vuelo estacionario, romperá el enlace contiguo. – Biggles

por favor pegue su código después de que lo haya hecho. Me gustaría saber cómo manejas el vuelo estacionario. neways Really Good Question :) – Salil

Salil: Tras nuevas pruebas, descubrí que no resolvía mi problema. – Biggles

a, a:hover { text-decoration: underline; } 
a img, a:hover img { text-decoration: none !important; }

Fuente

2010-06-04 08:28:25 eyelidlessness

¿cómo puedo hacer si quiero subrayar en tres y no en dos después del vuelo estacionario? – Salil

Estilos: a, a: hover {text-decoration: underline; } a img, a: hover img, span.two {text-decoration: none! Important; frontera: 0; } y marcado: one two three – eyelidlessness

No se puede obtener ninguno de estos para que funcionen. La imagen aún está subrayada. – Biggles

CSS: Omitir subrayado en parte del enlace

Respuesta

Cuestiones relacionadas