martes, 19 de junio de 2012

Pintar el ultimo elemento de una lista con Jquery

Hola a todos soy jose fernandez y en esta oportunidad les traigo un ejemplo mas, que consiste en pintar el ultimo elemento de una lista cuando se detecta el mouse sobre el item.

Los pasos que deben seguir para llevar a cabo el ejemplo son los siguientes:

paso1:

crear la clase green en la seccion "head" de su html

<style>
.green { 
color: green;
 }
</style>

paso2:

importar la libreria jquery a su html

<script type="text/javascript" src="jquery.js"> </script>

paso3:

crear la funcion que pinte el ultimo elemento cuando se detecte el mouse encima del ultimo item

<script type="text/javescript">
$(document).ready(function() {
   $("#orderedlist3 li:last").hover(function() {
     $(this).addClass("green");
   },function(){
     $(this).removeClass("green");
   });
 });
</script>

paso4:

realizar una lista usando la etiqueta li y asignandole el "id" orderedlist3

<ol type="1" id="orderedlist3">
  • windows
  • linux
  • mac
  • </ol>

    resultado:

    como resultado la pagina html nos quedaria como se muestra

    <html>
    <head>
    
    
    
    </head>
    <body>
    
    1. windows
    2. linux
    3. mac
    </body> </html>

    espero les haya servido mucha suerte a todos hasta luego, Jose Fernandez Segura

    2 comentarios:

    1. Señor Fernandez me parece muy interesante la informacion Jquery. Seria interesante tambien usar Action Script y Flash, ya que son grandes herramientas para bueno efectos web

      ResponderEliminar
    2. si tienes razon daniel, voy a buscar algunos buenos ejemplos para poder compartir y les sirva de aprendizaje a los demas, un saludo y gracias por comentar

      ResponderEliminar

    Google Google