Programación Web y Scripting > JavaScript

 Aplicar estilo css a un menu

(1/1)

crs94:
Hola a todos la verdad soy un novato asi que les pido de su ayuda miren lo que pasa
este es mi codigo <style type="text/css">
li {
  border-style: solid;
  border-color: #f0d7b5;
  border-width: 2px 1px 0;
  margin: 0 2px;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 90px;
  text-align: center;
  background-color: #aa876f;
}
   </style>
<ul style="
  margin: 0 40px 0 0;
  padding: 0;
  font-size: 105%;
  list-style-type: none;
  float: right;">
<li>Menu</li>
<li>Home</li>
<li>Contaction</li>
</ul>



AHora digamos que tengo un estilo el que sea inventenselo ustedes pero lo que quiero es saber como hacer que con el onmouse over se aplique este estilo por favor ayudenme y si pueden expliquenme cada parte del codigo que si me interesa aprender como le aria?

F_Tanori:

--- Cita de: "crs94" ---Hola a todos la verdad soy un novato asi que les pido de su ayuda miren lo que pasa
este es mi codigo <style type="text/css">
li {
  border-style: solid;
  border-color: #f0d7b5;
  border-width: 2px 1px 0;
  margin: 0 2px;
  float: left;
  height: 40px;
  line-height: 40px;
  width: 90px;
  text-align: center;
  background-color: #aa876f;
}
   </style>
<ul style="
  margin: 0 40px 0 0;
  padding: 0;
  font-size: 105%;
  list-style-type: none;
  float: right;">
<li>Menu</li>
<li>Home</li>
<li>Contaction</li>
</ul>



AHora digamos que tengo un estilo el que sea inventenselo ustedes pero lo que quiero es saber como hacer que con el onmouse over se aplique este estilo por favor ayudenme y si pueden expliquenme cada parte del codigo que si me interesa aprender como le aria?
--- Fin de la cita ---


Mira en estas paginas, puedes descargar muchos ejemplos, es cuestion de analizar el codigo:

viewtopic.php?t=5710
http://cssmenumaker.com/horizontal_css_menu.php

Lo que necesitas primero es leer algun curso/manual.

Saludos

fonsi3:
Debes aplicar la pseudo-class "hover", que se activa cuando se hace "mouseover" sobre un elemento HTML, de esta manera por ejemplo


--- Código: CSS ---li:hover {    color: #ff0063    background: #22ff22} 
Aqui tienes mas informacion: http://www.w3.org/TR/CSS2/selector.html

Navegación

[0] Índice de Mensajes