Preguntilla CSS
4 seguidores
Hola a todos!
He creado una lista con 'li', y no quiero utilizar href para crear los enlaces <em>(<li><a href.....), </em>lo que pasa es que me gustaria que al pasar el raton sobre el enlace <em>(<li>enlace</li>) </em> el texto cambie de color.
la pregunta: ¿hay alguna forma de conseguirlo sin tener que poner en cada <li> un onmouseover?, porque li:hover{color:red} no me funciona.
muuuuchas gracias!
zigotica
todo tuyo, añade el comentario si quieres en el codigo no hace falta que lo metas en la web, gracias de todos modos.
de todos modos es mucho mas elegante usar el .htc si realmente quieres hover en IE.
seldon
Gracias Zigotica, eres un monstruo, lo que pasa es que yo no puedo hacer "algo del estilo", lo digo porque solo he llegado al copiar/pegar....
Me harias un gran favor si me dejas el codigo para insertarlo mi web (con un comentario hacia tí en el script, claro)....
Muuuuchas gracias, en serio!
zigotica
automatizalo para IE (no lo escribas en el html) y deja el CSS para los demas. algo del estilo:
<code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<title>test hover en IE via js</title>
<link rel="SHORTCUT ICON" href="http://meddle.dzygn.com/favicon.ico" />
<link rel='stylesheet' type='text/css' media='screen, tv' id='doubleplusgoodstyle' href='/css/gaudi.css' />
<style type="text/css">
li{color:red}
li:hover{color:green}
</style>
<script type="text/javascript">
var PUTOIE = {
addLoadEvent : function (fn){
var old = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
}
else {
window.onload = function() {
old();
fn();
}
}
},
asignaEvento : function(handlerNode){
handlerNode.onmouseover = function() {
handlerNode.style.color = "green";
}
handlerNode.onmouseout = function() {
handlerNode.style.color = "red";
}
},
init : function(tag, node)
{
alert("ie will start hacking hover");
if(node) {if(typeof(node)=="string") node = document.getElementById(node);}
else node = document;
var tagARRAY = node.getElementsByTagName(tag);
for (var k=0; k<tagARRAY.length; k++) {
var tagELM = tagARRAY[k];
PUTOIE.asignaEvento(tagELM);
}
}
}
window.onload=function(){alert("hi")}
if (document.getElementById && document.getElementsByTagName && !window.getComputedStyle) {
PUTOIE.addLoadEvent(function(){PUTOIE.init("LI", "capa");})
}
</script>
</head>
<body>
<div id="capa">
<ul>
<li>hola</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html></code>
seldon
terminaré haciendolo con javascript, lo que pasa que en una lista de 40 y pico elementos tanto onmouseover y onmouseout es demasiado redundante...
gracias!
joseflorido
si que se puede hacer con CSS :)
simplemente con li:hover{}; pero IE no lo soporta :p
sin comportamientos o sin javascript no conseguiras que IE lo haga :(
saludos
seldon
Si ya habia visto este enlace, pero es matar moscas a cañonazos,
básicamente lo que quiero es que un texto dentro del <em><li></em> cambie de color cada vez que paso el raton encima de el, sin necesidad de un <em>href </em>ni de javascript <em>(onmouseover</em>).. vamos, que si se puede hacer en css
muchas gracias por el enlace..
missha
Seguramente lo estás probando en Internet Explorer, que solo soporta la pseudoclase hover para los elementos a. El resto lo hace bien, y soporta el hover para todos los elementos.
Para solucionarlo en IE, mejor que utilizar un onmouseover, puedes usar un comportamiento HTC:
http://www.xs4all.nl/~peterned/csshover.html
o la técnica de IE7:
http://dean.edwards.name/IE7/
Espero que te sirva :)
zigotica
1. ¿enlaces sin a href?
2. si que funciona, pero no en IE. Para hackearlo (si crees que vale la pena) puedes probar este metodo