javascript - bootstrap - jQuery hover y selector de clase
mouseleave jquery (10)
Quiero cambiar dinámicamente el color de fondo de un div usando el siguiente HTML, CSS y javascript. HTML:
<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'');
});
EDITAR: Olvidé decir que tenía razones para no querer usar el modo css.
Y de hecho me olvidé de verificar si el DOM estaba cargado.
En una nota lateral, esto es más eficiente:
$(".menuItem").hover(function(){
this.style.backgroundColor = "#F00";
}, function() {
this.style.backgroundColor = "#000";
});
Esto se puede lograr en CSS usando la pseudoclase: hover. (: el control deslizante 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;
}
Prefiero la respuesta de foxy porque nunca deberíamos usar javascript cuando las propiedades de css existentes están hechas para el trabajo.
No olvides agregar display: block ; en .menuItem , por lo que se tienen en cuenta la altura y el ancho.
editar: para una mejor secuencia de comandos / apariencia y desacoplamiento, si alguna vez necesitas cambiar el estilo a través de jQuery definiría una clase CSS adicional y usar $(...).addClass("myclass") y $(...).removeClass("myclass")
Tu código se ve bien para mí.
Asegúrate de que el DOM esté listo antes de que tu javascript sea ejecutado usando la función $ (callback) de jQuery:
$(function() {
$(''.menuItem'').hover( function(){
$(this).css(''background-color'', ''#F00'');
},
function(){
$(this).css(''background-color'', ''#000'');
});
});
test.html
<?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>
test.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'');
});
});
Trabajos :-)
Acabo de codificar un ejemplo en jQuery sobre cómo crear superposiciones div sobre botones de radio para crear un complemento selector de color compacto, interactivo pero simple para jQuery
http://blarnee.com/wp/jquery-colour-selector-plug-in-with-support-for-graceful-degradation/
Siempre mantenga las cosas fáciles y simples creando una clase
.bcolor {background: # F00; }
LUEGO UTILIZA EL addClass () & removeClass () para terminarlo
Sugeriría no usar JavaScript para este tipo de interacción simple. CSS es capaz de hacerlo (incluso en Internet Explorer 6) y será mucho más sensible que hacerlo con JavaScript.
Puede utilizar 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;
}
Si alguien lee la pregunta original para indicar que quiere cambiar dinámicamente el css de desplazamiento y no solo cambiar la regla de base css para el elemento, he encontrado que esto funciona:
Tengo una página cargada dinámicamente que me obliga a averiguar qué tan alto se vuelve 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;
}
}
Como se trata de un menú, también podría llevarlo al siguiente nivel, limpiar el HTML y hacerlo más semántico usando un elemento de 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;
}