jQuery conjunto activo/pase de imágenes de fondo

Tengo una lista que tiene 5 elementos, el primero (en carga) activo (con una clase de ‘activo’ añadido por jQuery). Todos ellos tienen imágenes de fondo asociados con ellos. Si hago clic en cualquiera de los li otro div actualizaciones con contenido relevante (esto es de trabajo).

Sin embargo, yo estoy luchando con los siguientes:

Si usted haga clic en un li, la actualización de su imagen de fondo que sea de color (sufijo ‘-cl.png’). Cuando me pase por encima del otro, la actualización de su imagen de fondo a color y mantener la hace clic en uno (con una clase de ‘activo’) de color también. Si un li no es que se cernía sobre establecer la imagen de fondo en blanco y negro (sufijo ‘-bw.png’), pero mantenga el activo de un color.

Espero que me he explicado yo claramente. Alguna idea de cómo puedo lograr esto? Gracias, Brett

Aquí está mi código HTML:

<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>
InformationsquelleAutor Brett | 2010-07-19

5 Kommentare

  1. 4

    Primer lugar, me gustaría hacer la mayoría de los de la obra en CSS, como este:

    .graduate1 { background: url(image1-bw.png); }
    .graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
    .graduate2 { background: url(image2-bw.png); }
    .graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
    //etc...

    Luego en jQuery todo lo que usted necesita preocuparse es de la active clase, como este:

    $('.graduate_tab li').click( function() {
      $(this).addClass('active').siblings().removeClass('active');
    });

    Utilizando .addClass() en el hecho clic en uno y .removeClass() en el resto se moverá el active clase al hacer clic en uno…si usted quiere ser capaz de eliminar de una ya activo (activar off) puede reemplazar .addClass() con .toggleClass() por ese comportamiento.

  2. 4
    $('.graduate_tab li').hover(
      function() { 
        $(this).css('background-image','your-image-cl.jpg'); 
      }, function() {
        $(this).css('background-image','your-image.jpg'); 
      });
    
    $('.graduate_tab li').click( function() {
      $('.graduate_tab li').removeClass('active');
      $(this).addClass('active');
    });

    Esto debe hacer el truco. En caso de que se me olvidó algo, me digo, y voy a editar el código.

    • Squ36, gracias por la respuesta. Eso no es lo que yo busco. Lo que necesito hacer es detectar que li se cernía, establece que uno a color, mantener el ‘clic’ de un color y defina el resto en b&w. Todos los iamges son diferentes, pero coinciden con la li convención de nomenclatura por ejemplo. graduate1-bw.png, graduate2-cl.png etc.
  3. 2

    He utilizado el haga clic en hover jquery función. No hay necesidad de dar a cada li una clase en css. Por lo tanto:

    .ui-state-active, .ui-state-hover  {
        font-weight: bold !important;
        //and other css
    }

    y

     jQuery('.graduate_tab li').bind('click hover', function () {
            jQuery(this).addClass('.ui-state-active')
                        .siblings().removeClass('.ui-state-active');
    
     });

    Espero que esto ayude a alguien.

  4. 0

    puede utilizar el
    a :hover

    propiedad en css

    activo:hover {background-color:black;}

    algo como esto…

    pero no estoy seguro de que funcione en ie6.

  5. 0
        $('.titleclz').mouseenter(function( event ) {
    
        $(this).css('background-image','url(bg-image1.png path)');
        $(this).css('background-repeat','no-repeat'); 
    
    });
    
    $(".titleclz").mouseleave(function( event ) {
    
        $(this).css('background-image','url(bg-image2.png path)');
        $(this).css('background-repeat','no-repeat');
    
    });

    Get de JQuery imagen de fondo efecto de hover…

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea