cambiar apariencia de button al pasar el mouse pero considerando disabled

xcars · #1 (**permalink**) 01/09/2008, 17:53

Saludos, estoy armando un menu el cual esta hecho con botones (input type="button") y no con enlaces (<a href>) ya que es casi obligatorio para mi el poder habilitar y deshabilitar los botones.
La parte de habilitar y deshabilitar ya la tengo hecha, y pues ahora estoy trabajando en la apariencia, y pues me he topado con que el boton puede estar deshabilitado pero el mouseover siempre funciona, y pues no estoy seguro tampoco si me he salido del standard css, asi que aki les dejo el codigo para que lo vean
HTML

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<link href="css/basico.css" rel="stylesheet" type="text/css" />
	<script src="recursos/funciones_mbasico.js" language="JavaScript"></script>
	<title>Prueba de sistema basico</title>
</head>

<body>

	<span class="preload17a"></span>
	<span class="preload17b"></span>
	
<ul class="menu17">
<li><input type="button" id="btn_nuevo" value="Nuevo" class="css_nuevo " ></button></li>
<li><input type="button" id="btn_insertar" value="Insertar" class="css_insertar " disabled></button></li>
<li><input type="button" id="btn_editar" value="Editar" class="css_editar " ></button></li>
<li><input type="button" id="btn_actualizar" value="Actualizar" class="css_actualizar " disabled></button></li>
<li><input type="button" id="btn_borrar" value="Borrar" class="css_borrar " disabled></button></li>
<li><input type="button" id="btn_cancelar" value="Cancelar" class="css_cancelar " ></button></li>
</ul>
</body>
</html>

CSS

Código:

body
{
	background-color: #E1E1E1;
}
button
{
	text-decoration: none;
}
.css_nuevo
{
color: #4B4B4B;
	background: url(../iconos/btn_nuevo.gif) no-repeat;
	border: 1px solid #FFFFFF;
	padding: 4px; 
	font-family: Tahoma, Verdana, "Trebuchet MS";
	font-size: 11px;
	color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}

.css_insertar
{
color: #4B4B4B;
	background: url(../iconos/btn_insertar.gif) no-repeat;
	border: 1px solid #FFFFFF;
	padding: 4px; 
	font-family: Tahoma, Verdana, "Trebuchet MS";
	font-size: 11px;
	color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}
.css_editar
{
color: #4B4B4B;
	background: url(../iconos/btn_editar.gif) no-repeat;
	border: 1px solid #FFFFFF;
	padding: 4px; 
	font-family: Tahoma, Verdana, "Trebuchet MS";
	font-size: 11px;
	color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}

.css_actualizar
{
color: #4B4B4B;
	background: url(../iconos/btn_actualizar.gif) no-repeat;
	border: 1px solid #FFFFFF;
	padding: 4px; 
	font-family: Tahoma, Verdana, "Trebuchet MS";
	font-size: 11px;
	color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}

.css_borrar
{
color: #4B4B4B;
	background: url(../iconos/btn_borrar.gif) no-repeat;
	border: 1px solid #FFFFFF;
	padding: 4px; 
	font-family: Tahoma, Verdana, "Trebuchet MS";
	font-size: 11px;
	color: #666;
width: 100px;
height: 50px;
text-decoration: none;
}

.css_cancelar
{
color: #4B4B4B;
	background: url(../iconos/btn_cancelar.gif) no-repeat;
	border: 1px solid #FFFFFF;
	padding: 4px; 
	font-family: Tahoma, Verdana, "Trebuchet MS";
	font-size: 11px;
	color: #666;
	width: 100px;
	height: 50px;
	text-decoration: none;
}


.menu17 
{
	margin: 0 auto;
	width: 90%;
	text-align: center;
	padding:5px; 
	list-style:none; 
	height:auto; 
	position:relative; 
	font-size:11px;
	border:1px;
}
.menu17 li 
{
	float:left; 
	margin-right:1px;
}
.menu17 li input 
{
	display:block; 
	float:left; 
	color:#333; 
	text-decoration:none; 
	font-family:arial, verdana, sans-serif; 
	font-weight:bold; 
	text-align:center; 
	padding:4px; 
	border-color: #FFFFFF;
	background-color: #A5A5A5;
}
.menu17 li input:focus
{
	background-color: #C3C3C3;
}
.menu17 li input:hover
{
	background-color: #C3C3C3;
}

la idea es que no lo quiero hacer con JS, y quisiera saber si hay alguna manera de lograrlo solo con CSS, gracias de antemano por la ayuda

Raulmmmm · #2 (**permalink**) 02/09/2008, 02:34

¿Lo que quieres es que no funcione el :hover sobre los input disabled? Pues puedes añadir esto a tu CSS:

Código:

#btn_insertar[disabled], #btn_nuevo[disabled], #btn_editar[disabled], #btn_actualizar[disabled], #btn_borrar[disabled], #btn_cancelar[disabled]
{
	background-color: #A5A5A5;
}

xcars · #3 (**permalink**) 02/09/2008, 14:37

Gracias por el codigo, lo pruebo y te aviso si me funciono.... gracias