Problema con :hover en IE

limboings · #1 (**permalink**) 13/11/2006, 17:06

Hola buenas,

Pues ya me dijeron que el pseudoelemento :hover (pseudoelemento o pseudoclase?no recuerdo exactammente) solo funcionaba en elementos <a> en IE,pero necesito sustituir :hover por otra forma de poder hacer "sobre" sobre una lista desordenada..he leido sobre algo en javascript pero si puedo con CSS prefiero hacerlo en CSS,si no hya opcion alguna en CSS intentare con javascript..

Un Saludo y gracias de antemano!!

limboings · #2 (**permalink**) 14/11/2006, 12:53

Buenas,

Nadie sabe sobre esto??porfavor,necesito hacerlo..

Un Saludo y gracias!!

AlZuwaga · #3 (**permalink**) 14/11/2006, 13:03

ve intentándolo con javascript.

limboings · #4 (**permalink**) 14/11/2006, 13:15

Buenas,

Es lo qu estoy haciendo..pero como que no me sale (poca experiencia con JS),alguien sabe??

Un Saludo y gracias!!

P.D: Lo posteo mejor en el subforo JS o aqui sera mejor?

JavierB · #5 (**permalink**) 14/11/2006, 13:20

Cita:

Iniciado por limboings

P.D: Lo posteo mejor en el subforo JS o aqui sera mejor?

No te preocupes, lo mando a JavaScript en dos golpes de ratón.

Movido desde Css.

Saludos,

limboings · #6 (**permalink**) 14/11/2006, 14:35

Buenas,

He estado haciendo mas pruebas y lo unico que consigo es que el estado estatico tenga los estilos del modo sobre..que falla??

Tengo un codigo de prueba que he creado separado de donde lo quiero usar(suelo hacer pruebas independientes para no liarme con el codigo):

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Suckerfish Dropdowns - Perciformes!</title>
<script language="javascript">
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
li{
background-color: red;
}
li:hover{
margin-left: 50px;
background-color: blue;
}
li.sfhover { background-color:blue; }
</style>
</head>

<body>
<ul>
<li class="sfhover">Que somos</li>
<li class="sfhover" >Que somos</li>
<li class="sfhover">Que somos</li>
</ul>
</body>

</html>

Un Saludo y graciass!!

limboings · #7 (**permalink**) 14/11/2006, 16:43

Hola buenas..

Despues de hacer mil y una pruebas he llegado a una prueba que el navegador se me queda clavado y no se porque es esa la forma de hacerlo (lo digo porque no me lo puede poner tan facil IE),supongo que habra algo que se contradice y vuelvo loco al navegador o algo asi,aqui os dejo codigo:

Código:

<html>

<style type="text/css">

#navegacion ul li {
	_iehack1: expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));
	_iehack2: expression(this.onmouseout = new Function("this.className=_iehack;"));
}
#navegacion ul {
	position:absolute;
	left:0;
	top:260px;
	list-style:none;	
	margin-left:5px;
	margin-top: 20px;
	font-size: 12px;
	font-family:Verdana,Arial;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	width:146px;
	height:287px;
border:1px solid #a53323;
}
#navegacion ul li{
    background-image: url(imagenes/ico.png);
	padding-left: 0px;
	padding-top: 7px;
	border-bottom:1px solid #a53323;
	border-top:8px solid #ff4f37;
	width:146px;
	height: 20px;
	text-align: center;
}
#navegacion ul li.hover{
    background-image: url(imagenes/ico.png);
	margin-left:15px;
	padding-left:15px;
	padding-top: 7px;
	border:2px solid #fd5f21;
	border-top:8px double #fd5f21;
	width:146px;
	height: 20px;
	text-align: left;
}

#navegacion a{
	color: #5c0803;
	text-decoration: none;
}
#navegacion ul li.hover a{
 color: #5c0803; 
}
#navegacion ul li.hover a.hover{
 color: #f59601 ; 
 border: none;
}
#navegacion ul li.hover a:active{
font-size: 13px;
}

</style>

<body>
<div id="navegacion">
<ul>
	<li><a href="#">Link 1.1</a></li>
	<li><a href="#">Link 1.2</a></li>
	<li><a href="#">Link 1.3</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 2.1</a></li>
	<li><a href="#">Link 2.2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>

</div>
</body>
</html>

Esta forma de hacerlo es diferente a la que puse primera,pero es que es lo que e encontrado (es en CSS,lo siento por vovler loco a los moderadores,pero es que me da igual como hacerlo mientras se realize el :hover),bueno espero me ayuden...

Ahora al cargar,me carga..pero el cursor del raton no para de parpadear de estado normal a estado "pensando"(el reloj de arena) y cuando pongo el cursor encima de un elemento li se me "clava" el navegador..

Un saludo y gracias!!

limboings · #8 (**permalink**) 15/11/2006, 13:36

Buenas,

Bueno pues ya lo soluciones,alfinal quedo asi el codigo:

Código:

<html>
<script language="JavaScript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<style type="text/css">
ul {
	position:absolute;
	left:0;
	top:260px;
	list-style:none;	
	margin-left:5px;
	margin-top: 20px;
	font-size: 12px;
	font-family:Verdana,Arial;
	font-weight:bold;
	padding: 0px 0px 0px 0px;
	width:146px;
	height:287px;
border:1px solid #a53323;
}
ul li{
    background-image: url(imagenes/ico.png);
	padding-left: 0px;
	padding-top: 7px;
	border-bottom:1px solid #a53323;
	border-top:8px solid #ff4f37;
	width:146px;
	height: 20px;
	text-align: center;
}
ul li.over{
    background-image: url(imagenes/ico.png);
	margin-left:15px;
	padding-left:15px;
	padding-top: 7px;
	border:2px solid #fd5f21;
	border-top:8px double #fd5f21;
	width:146px;
	height: 20px;
	text-align: left;
}

a{
	color: #5c0803;
	text-decoration: none;
}
ul li.over a{
 color: #5c0803; 
}
ul li.over a:hover{
 color: #f59601 ; 
 border: none;
}
ul li.over a:active{
font-size: 13px;
}

</style>
<body>
<div >
<ul id="nav">
	<li><a href="#">Link 1.1</a></li>
	<li><a href="#">Link 1.2</a></li>
	<li><a href="#">Link 1.3</a></li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 2.1</a></li>
	<li><a href="#">Link 2.2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>
</div>
</body>
</html>

Lo sigo por si alguien tiene el mismo problema,para que vea los errores que yo tube..

Un Saludo y gracias a todos!