como usar :hover :link :visited :focus del CSS

Citar

Escrito el 02 Jul 2010 10:19 pm

estoy haciendo un menu usando solo HTML y CSS,pero no logro encontrar un tutorial que me explique como usar la condiciones del CSS:

:hover
:link
:visited
:focus

entiendo en teoría para que sirven todas menos :focus pero no se aplicar ninguna,me podrían explicar un poco de como usarlas?

Me dirán:

Todos escribió:

porque no usas javascript si no sabes hacerlo en CSS

Pero es que con Javascript solo se cambiar el color del fondo de las secciones de menú al pasar el mouse por encima,el resto de lo que se de javascript no me sirve para el menú.

Saludos,espero que me puedan ayudar

Por joseo5252

10 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 02 Jul 2010 10:41 pm

e intentado improvisando y logre esto:

Código HTML :

<html>
<head>
<title>menu css</title>
<style type="text/css">
#menu {
border-top: 1px solid #ff9900;
border-left: 1px solid #ff9900;
border-right: 1px solid #ff9900;
display: block;
text-align: center;
width: 18%;
}
#menu_li {
border-style: none;
text-decoration: none;
list-style-type: none;
}
#menu_li a:hover {
background-color: #ff6666;
}

</style>
</head>
<body>
<div id="menu">
<ul id="menu_li">
<li><a href="http://cristalab.com">incio</a></li>
<li><a href="http://cristalab.com">inicio</a></li>
<li><a href="http://cristalab.com">inicio</a></li>
</ul>
</div>
</body>
</html>

pero solo logre llegar a entender 2 de las propiedades antes mencionadas:

:hover
:visited

las demas,no,necesito que alguien me explique...

Por joseo5252

10 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 02 Jul 2010 11:31 pm

joseo5252 escribió:

Me dirán:

Todos escribió:

porque no usas javascript si no sabes hacerlo en CSS

No se quien pudiera decirte algo asi, JS es 1000 veces mas complicado que CSS, CSS ni siquiera es un lenguaje de programación.

Ahora:
a //el selector para el vinculo, le afecta a todos los estados del vinculo si no se especifican por separado.

a:link //idem que el anterior

a:hover // es el estado de cuando el cursor se posa sobre el vinculo, lo que pongas aqui se verá al poner el cursor en el enlace.

a:visited // afecta a los enlaces que ya fueron visitados. Si haces clic sobre algun enlace queda marcado como visitado forever U_U

a:active // es mientras tienes presionado el boton del raton con el cursor sobre el enlace.

a:focus // esta no es una propiedad de los enlaces, pero en tal caso sirve para cuando n enlace es seleccionado (sea por mouse o con la tecla TAB

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 03 Jul 2010 12:23 am

gracias,entendi todo perfecto

,pero ahora,por favor dime,este codigo:

Código :

<html> 
<head> 
<title>menu css</title> 
<style type="text/css"> 
#menu { 
border-top: 1px solid #ff9900; 
border-left: 1px solid #ff9900; 
border-right: 1px solid #ff9900; 
display: block; 
text-align: center; 
width: 18%; 
} 
#menu_li { 
border-style: none; 
text-decoration: none; 
list-style-type: none; 
} 
#menu_li a:hover { 
background-color: #ff6666; 
} 
 
</style> 
</head> 
<body> 
<div id="menu"> 
<ul id="menu_li"> 
<li><a href="http://cristalab.com">incio</a></li> 
<li><a href="http://cristalab.com">inicio</a></li> 
<li><a href="http://cristalab.com">inicio</a></li> 
</ul> 
</div> 
</body> 
</html>

esta bien escrito o es un garabato mio que el navegador apenas lo puede entender?

Por joseo5252

10 de clabLevel

Envíale un mensaje privado Email

Citar

Escrito el 03 Jul 2010 02:44 am

a mi manera de ver esta bien escrito, obviamente si no especificas una DTD

Por bucle_infinito

Claber

166 de clabLevel

1 tutorial

Envíale un mensaje privado

.NET Developer

Citar

Escrito el 03 Jul 2010 07:33 pm

Pues "bien escrito", si, no tiene errores de sintaxis.

Que funcione, es otra cosa. Pero ese depende de lo que quieras hacer. Cada caso de diseño tiene distintas soluciones en CSS, unas mejores que otras.

En el caso de ese codigo, no tengo idea de que quieres lograr visualmente, porque segun yo, para cualquier cosa decente le falta un monton de código por especificar.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino Bastard Operators From Hell REC Héroes

Envíale un mensaje privado Web

London, UK

@ramono

Citar

Escrito el 04 Jul 2010 12:54 am

si se pero estoy mostrando solo la funcion,antes cuando puse el codigo el quite todo el diseño al menu porque se veia bien y lo que me importaba era si estaba codificado bien el menu,saludos

Por joseo5252

10 de clabLevel

Envíale un mensaje privado Email

como usar :hover :link :visited :focus del CSS

Escribe una respuesta rapida