jQuery hover y selector de clase

Quiero cambiar el color de fondo de un div de forma dinámica utilizando el siguiente HTML, CSS y javascript. HTML:jQuery hover y selector de clase

<div id="menu"> 
    <div class="menuItem"><a href=#>Bla</a></div> 
    <div class="menuItem"><a href=#>Bla</a></div> 
    <div class="menuItem"><a href=#>Bla</a></div> 
</div>

CSS:

.menuItem{ 
    display:inline; 
    height:30px; 
    width:100px; 
    background-color:#000;

Javascript:

$('.menuItem').hover(function(){ 
    $(this).css('background-color', '#F00'); 
}, 
function(){ 
    $(this).css('background-color', '#000'); 
});

EDIT: me olvidó decir que tenía razones para no querer usar el camino css.

Y, de hecho, me olvidé de comprobar si el DOM estaba cargado.

Fuente

2008-11-09 Pim Jager

Su código se ve bien para mí.

Asegúrese de que el DOM está listo antes de JavaScript se ejecuta mediante el uso de la función de jQuery $ (devolución de llamada):

$(function() { 
    $('.menuItem').hover(function(){ 
     $(this).css('background-color', '#F00'); 
    }, 
    function(){ 
     $(this).css('background-color', '#000'); 
    }); 
});

Fuente

2008-11-09 13:27:24 foxy

Como mencioné en esta respuesta, creo que el tiempo fue todo lo que te faltabas. –

Sí, simplemente olvidé ejecutar el código después de que el DOM hubiera terminado de cargarse. –

+1 solución muy sencilla – jpswain

Esto se puede lograr en el CSS mediante el: hover pseudo-clase. (: Hover no funciona en <div> s en IE6)

HTML:

<div id="menu"> 
    <a class="menuItem" href=#>Bla</a> 
    <a class="menuItem" href=#>Bla</a> 
    <a class="menuItem" href=#>Bla</a> 
</div>

CSS:

.menuItem{ 
    height:30px; 
    width:100px; 
    background-color:#000; 
} 
.menuItem:hover { 
    background-color:#F00; 
}

Fuente

2008-11-09 13:35:17 foxy

test.html prueba

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <title>jQuery Test</title> 
     <link rel="stylesheet" type="text/css" href="test.css" /> 
     <script type="text/javascript" src="jquery.js"></script> 
     <script type="text/javascript" src="test.js"></script> 
    </head> 
    <body> 
     <div id="menu"> 
      <div class="menuItem"><a href=#>Bla</a></div> 
      <div class="menuItem"><a href=#>Bla</a></div> 
      <div class="menuItem"><a href=#>Bla</a></div> 
     </div> 
    </body> 
</html>

. css

.menuItem 
{ 

    display: inline; 
    height: 30px; 
    width: 100px; 
    background-color: #000; 

}

Test.js

$(function(){ 

    $('.menuItem').hover(function(){ 

     $(this).css('background-color', '#F00'); 

    }, 
    function(){ 

     $(this).css('background-color', '#000'); 

    }); 

});

Obras :-)

Fuente

2008-11-09 13:52:30 okoman

que sugeriría a no utilizar JavaScript para este tipo de interacción sencilla. CSS es capaz de hacerlo (incluso en Internet Explorer 6) y será mucho más sensible que hacerlo con JavaScript.

Puede usar la pseudoclase CSS ": hover" pero para que funcione con Internet Explorer 6, debe usarla en un elemento "a".

.menuItem 
{ 
    display: inline; 
    background-color: #000; 

    /* width and height should not work on inline elements */ 
    /* if this works, your browser is doing the rendering */ 
    /* in quirks mode which will not be compatible with */ 
    /* other browsers - but this will not work on touch mobile devices like android */ 

} 
.menuItem a:hover 
{ 
    background-color:#F00; 
}

Fuente

2008-11-09 13:57:46

Prefiero la respuesta de foxy porque nunca deberíamos usar javascript cuando las propiedades de css existentes están hechas para el trabajo.

No olvide agregar display: block ; en .menuItem, por lo que se tienen en cuenta la altura y el ancho.

de edición: para una mejor escritura/Estructura & sienten desacoplamiento, si tuviera que cambiar de estilo a través de jQuery Me defino una clase css adicionales y utilizar $(...).addClass("myclass") y $(...).removeClass("myclass")

Fuente

2008-11-09 14:10:16 vincent

Estoy de acuerdo con los vincents. Vincents está en la casa! –

Si solo está cambiando el color de fondo, entonces no es necesario hacer un cambio de clase; el cambio de clases hace que el navegador tenga que volver a calcular el posicionamiento de los elementos. – Sugendran

Comentario interesante sobre el cálculo de reposicionamiento, lo pensaré la próxima vez. – vincent

Como se trata de un menú, puede ser que también llevarlo al siguiente nivel, y limpiar el HTML, y hacerlo más semántica mediante el uso de un elemento de la lista:

HTML:

<ul id="menu"> 
    <li><a href="#">Bla</a></li> 
    <li><a href="#">Bla</a></li> 
    <li><a href="#">Bla</a></li> 
    </ul>

CSS:

#menu { 
    margin: 0; 
} 
#menu li { 
    float: left; 
    list-style: none; 
    margin: 0; 
} 
#menu li a { 
    display: block; 
    line-height:30px; 
    width:100px; 
    background-color:#000; 
} 
#menu li a:hover { 
    background-color:#F00; 
}

Fuente

2008-11-09 15:37:43

Simplemente curioso ... Cuando hago sistemas de menú. Siempre me encuentro con las cosas UL/LI. Pero al usar este método, tuve que "desformatear" la configuración predeterminada para UL/LI y luego reformatearlos usando mi propio CSS personalizado. Especialmente con sub y sub/sub menús. Cuando usé etiquetas div como lo hizo el asker, solo necesité escribir el css que necesitaba para formatearlas, nada más. Desde entonces, siempre me he preguntado cómo se relaciona UL/LI con los menús en términos estrictos, menús y no listas (más como Navs). Pero no estoy diciendo que estés equivocado, solo preguntando por qué, aparte del hecho de que es la "norma", el método UL/LI es mejor que el div. –

En una nota de esto es más eficiente:

$(".menuItem").hover(function(){ 
    this.style.backgroundColor = "#F00"; 
}, function() { 
    this.style.backgroundColor = "#000"; 
});

Fuente

2008-11-09 21:47:39 Sugendran

acabo codificado por un ejemplo en jQuery sobre cómo crear superposiciones div sobre los botones de radio para crear una clavija de selector de color compacto, interactivo, pero sencillo -en para jQuery

http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/

Fuente

2009-03-11 04:21:33

siempre mantener las cosas fácil y sencilla mediante la creación de una clase

.bcolor {background: # F00; }

luego usar el addClass() & removeClass() para terminarlo

Fuente

2010-01-06 21:07:16 Joberror

Si alguien lee la pregunta original en el sentido de que quieren cambiar dinámicamente la posición de CSS y no sólo cambiar la regla css base para el elemento, he encontrado que esto funciona:

Tengo una página cargada dinámicamente que me obliga a averiguar qué tan alto se convierte el contenedor después de cargar los datos. Una vez cargado, quiero cambiar el efecto de desplazamiento del CSS para que un elemento cubra el contenedor resultante. Necesito cambiar la regla css .daymark: hover para tener una nueva altura. Así es como ...

function changeAttr(attrName,changeThis,toThis){ 
    var mysheet=document.styleSheets[1], targetrule; 
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules; 

    for (i=0; i<myrules.length; i++){ 
     if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule 
      targetrule=myrules[i]; 
      break; 
     } 
    } 
    switch(changeThis) 
    { 
     case "height": 
      targetrule.style.height=toThis+"px"; 
      break; 
     case "width": 
      targetrule.style.width=toThis+"px"; 
      break; 
    } 

}

Fuente

2011-02-16 15:53:54 Greg

Respuesta

Cuestiones relacionadas