Foros del Web » Creando para Internet » HTML »

[SOLUCIONADO] Lindo onmouseover que hace que se subraye el link

Estas en el tema de Lindo onmouseover que hace que se subraye el link en el foro de HTML en Foros del Web. http://www.bbc.co.uk/mundo/ En la pagina de la BBC de Londres cuando uno pone la flecha del mouse en un enlace supongo que un onmouseover hace que ...
  #1 (permalink)  
Antiguo 13/05/2013, 03:13
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 20 años, 2 meses
Puntos: 0
Lindo onmouseover que hace que se subraye el link

http://www.bbc.co.uk/mundo/

En la pagina de la BBC de Londres cuando uno pone la flecha del mouse en un enlace supongo que un onmouseover hace que se subraye la palabra del link...

Tambien despues de hacer click en el enlace este cambie el color de la fuente para indicar que ya se clickeo ese enlace... Eso se me hace mas estetico y funcional que las lineas punteadas del indicador de enlace activo.

El caso es que llevo "horas" viendo el codigo fuente de la pagina de la BBC de Londres y no encuentro el codigo de ese onmouseover que se ve tan genial.

Podria buscar por otro lado la informacion de como hacer el codigo de ese onMouseOver & onMouseOut que se ve tan genial, pero por lo que he visto en el codigo de la pagina este no esta escrito en cada enlace, lo que me hace sospechar que esta declarado en el "heat" como css, pero ya lo busque y nada.


Código:
 <style type="text/css">
        /* Use filters for IE6 */
        #blq-blocks a {
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.bbci.co.uk/frameworks/barlesque/2.45.9/desktop/3.5//img/blq-blocks_white_alpha.png', sizingMethod='image');
        }
        .blq-masthead-focus #blq-blocks a,
        .blq-mast-text-dark #blq-blocks a {
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.bbci.co.uk/frameworks/barlesque/2.45.9/desktop/3.5//img/blq-blocks_grey_alpha.png', sizingMethod='image');
        }
        #blq-nav-search button span {
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://static.bbci.co.uk/frameworks/barlesque/2.45.9/desktop/3.5//img/blq-search_grey_alpha.png', sizingMethod='image');
        }
        #blq-nav-search button img {
            position: absolute;
            left: -999em;    
        }
    </style>
<![endif]-->


<!--[if (IE 7])|(IE 8)>
    <style type="text/css">
        .blq-clearfix {
            display: inline-block;
        }
    </style>


<style type="text/css" media="print">
.story-body{
	overflow:visible;
}
</style>




<a href="/mundo/" class="brand"><span>Mundo</span></a> 
	<!-- <span class="tagline">(none)</span> -->
	<a href="/mundo/movil/?m" id="promo-mobile"><span>BBC Mundo en su celular</span></a>





	<div class="bbccom_text">
		<a href="/mundo/institucional/faqs/">Publicidad</a>
	</div>
	<script type="text/javascript">
	//<![CDATA[ 
	if (typeof BBC != "undefined" && typeof BBC.adverts != "undefined") { 
		BBC.adverts.write("leaderboard",false);
	}
	//]]> 
	</script>

Ya revise la programacion de las etiquetas "style css", "javascript" y los links "a href" y no se donde esta el "onmouseover" o cosa parecida que hace el efecto en los enlaces... Que es lo que pasa??? Es cosa de un editor de html, son aplicaciones de xhtml, html5, dreamweaver (o como se escriba)???

Me tiene opcesionada esta pagina de la BBC. Debo buscar como hacer un efecto similar en los enlaces por mi cuenta con css o una funcion onmouseover??? La verdad me resulta muy raro el codigo de esta pagina y me gustaria entenderlo.
  #2 (permalink)  
Antiguo 13/05/2013, 03:22
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: Lindo onmouseover que hace que se subraye el link

Código CSS:
Ver original
  1. /* =Links
  2. -----------------------------*/
  3. a,
  4. a:link {
  5.     text-decoration:none;
  6.     color:#174F82;
  7. }
  8. a:visited {
  9.     color:#4A7194;
  10. }
  11. a:hover,
  12. a:focus {
  13.     outline:none;
  14.     text-decoration:underline;
  15. }
  16. .rtl a:hover,
  17. .rtl a:focus {
  18.     color: #1788DC;
  19.     text-decoration:none;
  20. }
  21. a:active {
  22.     color: #1788DC;
  23. }

Google chrome= inspeccionar elemento = click al link de de la hoja de style.css
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB
  #3 (permalink)  
Antiguo 13/05/2013, 03:46
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 20 años, 2 meses
Puntos: 0
Respuesta: Lindo onmouseover que hace que se subraye el link

Hola arcanisgk122:

Wouuu!!! Muchas gracias por ayudarme a localizar el codigo css de los enlaces. Mañana lo probare en el html que estoy desarrollado para ver como se ve. Ese style css en los enlaces no se ve muy complicado, se entiende perfecto...

  #4 (permalink)  
Antiguo 13/05/2013, 04:15
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: Lindo onmouseover que hace que se subraye el link

el css3 y mucho mas ligero de entender que los anteriores aparte de que trae mas cosas... deberías de estudiar mas o googlear mas cuando quieras hacer algo especifico hay mucha información...
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB
  #5 (permalink)  
Antiguo 13/05/2013, 14:02
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 20 años, 2 meses
Puntos: 0
Respuesta: Lindo onmouseover que hace que se subraye el link

Caray, se veia facil este css3, pero cuando lo puse en el heat entre sus etiquetas:

Código:
<style type="text/css">
    /* =Links
    -----------------------------*/
    a,
    a:link {
        text-decoration:none;
        color:#174F82;
    }
    a:visited {
        color:#4A7194;
    }
    a:hover,
    a:focus {
        outline:none;
        text-decoration:underline;
    }
    .rtl a:hover,
    .rtl a:focus {
        color: #1788DC;
        text-decoration:none;
    }
    a:active {
        color: #1788DC;
    }
</style>
Pues no jalo bien. Claro tambien tengo otros escritos css y los link sus OnMuoseOver, sera que hace conflicto???

Código:
<style>
a { outline:none; 
    text-decoration:underline;
  }
</style>
Quise simplificarlo para que solo ponga la decoracion de la underline abajo de los links, pero tampoco me jalo.

Alguna sugerencia??? Tendre que bucar hacer ese efecto a la antigua escribiendo la funcion link por link de toda la pagina???
  #6 (permalink)  
Antiguo 13/05/2013, 14:08
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 10 meses
Puntos: 181
Respuesta: Lindo onmouseover que hace que se subraye el link

Hola,

Ese código que muestras no byte de CSS3



Cita:
Iniciado por Laura_Berenice Ver Mensaje

Alguna sugerencia???
Tomate 15 minutos para aprender como funciona la cascada, herencia y la especificidad de CSS.




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------

Última edición por pitufoweb; 13/05/2013 a las 14:16
  #7 (permalink)  
Antiguo 13/05/2013, 14:20
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 20 años, 2 meses
Puntos: 0
Respuesta: Lindo onmouseover que hace que se subraye el link

Pues hice pruebas en style css pero no me jalo la programacion, quizas lo mejor sea que busque hacer la funcion underline individualmente en cada link.


Código:
<style>
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:focus {outline:none;
        text-decoration:underline;}
</style>
  #8 (permalink)  
Antiguo 13/05/2013, 14:23
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 20 años, 2 meses
Puntos: 0
Respuesta: Lindo onmouseover que hace que se subraye el link

Okay, pitufoweb programador experto en css3, veremos como funciona la cascada, herencia y la especificidad de CSS.
  #9 (permalink)  
Antiguo 13/05/2013, 14:43
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 16 años, 10 meses
Puntos: 181
Respuesta: Lindo onmouseover que hace que se subraye el link

Muy bien
  #10 (permalink)  
Antiguo 13/05/2013, 14:46
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: Lindo onmouseover que hace que se subraye el link

primero que nada:
errores:
no pongas esto dentro de tu archivo HTML se vera horrible
llama a un archivo externo:
Código HTML:
Ver original
  1. <link rel="stylesheet" type="text/css" href="css/main.css">
algo mas:
error garrafal:
Código CSS:
Ver original
  1. A:link

de cuando haca se usa las mayúsculas para identificar elementos de un html en la parte de CSS???

te explico como lo hago yo

primero el HTML tengo un Link al que le asigno una class

Código HTML:
Ver original
  1. <a class="link" href="http://www.piriform.com/ccleaner/download">C-Cleaner</a><br>

luego en el CSS hago esto:

Código CSS:
Ver original
  1. .link{
  2.     text-decoration:none;
  3.     display: inline-block;
  4. }
  5. .link:hover{
  6.     color:#900;
  7.     font-weight:bold;
  8.     text-decoration:underline; 
  9.     }

Explico con el css .link le digo al navegador que todos las secciones que tenga una class llamada link se les quite las decoraciones que traen por defecto los link...

con el .link:hover le digo al navegador que cuando el raton este sobre el link aplique la decoración bold y underline, (esta tambien hereda la que no lleva decoración por defecto)

mas explicado de aquí no se puede... la idea es que tu juegues y estudies las demás opciones (focus, active)...

OTRA COSA SERIA UN ERROR GARRAFAL QUE NO LIMPIES TU CODIGO CSS que no se repitan o que no se contrarresten...

Ejemplo en mi web: http://icarosnet.tk/
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB

Última edición por arcanisgk122; 14/05/2013 a las 16:06
  #11 (permalink)  
Antiguo 22/07/2013, 22:23
Avatar de Laura_Berenice  
Fecha de Ingreso: septiembre-2004
Ubicación: Mexico
Mensajes: 79
Antigüedad: 20 años, 2 meses
Puntos: 0
Respuesta: Lindo onmouseover que hace que se subraye el link

Hola chicos:

Disculpa por contestarles unos meses despues, pero he estado muy ocupada y con muchos problemas... Por fin encontre la configuracion css style que quiero para los links:

Con este script aparece la underline plateada que yo quiero para los link de fuente (sin cambiar el color de la fuente o hacerla mas negra. No me gusta asi de excesivo) en sus funciones hover, visited y focus.

Código PHP:

<style  type="text/css">
a:link {text-decoration:nonecolor:#silver;}
a:hover {text-decoration:underlinecolor:#silver;}
a:visited {text-decoration:underlinecolor:#silver;}
a:focus {text-decoration:underlinecolor:#silver;}
</style
El unico problema es que tengo tambien tengo en mi website un menu y tambien le aparecia la underline plateada que no queria que funcionara en la fuente de los link del menu... Me tarde un poco en entenderlo, pero lo mejor era poner otro script css style que indicara que no quiero la decoracion del underline y poner la class en los links donde quiero que aplique esta funcion sin la underline.

Código PHP:
<style type="text/css">  
a.nounderline:link  
{  
 
text-decoration:none;  
}  
</
style>

class=
"nounderline" 

Ejemplo:

<
class="nounderline" href="http://www.yahoo.com"
Bueno, gracias por todo programadores de foros del web.
  #12 (permalink)  
Antiguo 29/07/2013, 12:42
Avatar de arcanisgk122  
Fecha de Ingreso: junio-2010
Mensajes: 755
Antigüedad: 14 años, 5 meses
Puntos: 28
Respuesta: Lindo onmouseover que hace que se subraye el link

al parecer no te as tomado el tiempo ni siquiera de leer las observaciones que te deje en mi post aterior...

Recapitulamos:

Cuando tienes múltiples link si haces esto:

Código CSS:
Ver original
  1. <style  type="text/css">
  2. a:link {text-decoration:none; color:#silver;}
  3. a:hover {text-decoration:underline; color:#silver;}
  4. a:visited {text-decoration:underline; color:#silver;}
  5. a:focus {text-decoration:underline; color:#silver;}
  6. </style>

Todos los link que estan en tu web heredan el efecto.

por consiguiente es mejor asignarlo por clases:

Código CSS:
Ver original
  1. .link{
  2.     text-decoration:none;
  3.     display: inline-block;
  4. }
  5. .link:hover{
  6.     color:#900;
  7.     font-weight:bold;
  8.     text-decoration:underline;  
  9.     }

si entiendes un poco de CSS

#link // abarca todos los Objetos con ID link (los ID no deberían repetirse)
.link // Abarca Todos los Objetos Con Class link (las class si pueden repetirse)
.link:hover // efecto se activa en los objetos por donde pases el mouse y tenga la class link.

de esta manera evitar el uso de CSS global
a:hover

queda en tus manos aplicar el efecto que quieres. Ejemplo:

Código CSS:
Ver original
  1. <style  type="text/css">
  2. .link {text-decoration:none; color:#silver;}
  3. .link:hover {text-decoration:underline; color:#silver;}
  4. .link:visited {text-decoration:underline; color:#silver;}
  5. .link:focus {text-decoration:underline; color:#silver;}
  6. </style>
__________________
Cooler Master Gladiator 600 - AMD PHENOM II X4 955 @ 3.5GHZ
GA-MA78GM-US2H - Super Talent 800 2GB x 2 Dual, (Unganged)
PSU Cooler Master eXtreme Power Plus 500W - Saphire R7-260OC-2GB

Etiquetas: css, html5, javascript, link, onmouseover
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:29.