Foros del Web » Creando para Internet » CSS »

cambiar apariencia de button al pasar el mouse pero considerando disabled

Estas en el tema de cambiar apariencia de button al pasar el mouse pero considerando disabled en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/09/2008, 18:53
Avatar de xcars  
Fecha de Ingreso: mayo-2005
Mensajes: 753
Antigüedad: 12 años, 7 meses
Puntos: 4
cambiar apariencia de button al pasar el mouse pero considerando disabled

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
__________________
Visita mi comprador de móviles
  #2 (permalink)  
Antiguo 02/09/2008, 03:34
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: cambiar apariencia de button al pasar el mouse pero considerando disabled

¿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;
}
  #3 (permalink)  
Antiguo 02/09/2008, 15:37
Avatar de xcars  
Fecha de Ingreso: mayo-2005
Mensajes: 753
Antigüedad: 12 años, 7 meses
Puntos: 4
Respuesta: cambiar apariencia de button al pasar el mouse pero considerando disabled

Gracias por el codigo, lo pruebo y te aviso si me funciono.... gracias
__________________
Visita mi comprador de móviles
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 13:18.