JQuery Show Div on Hover

Question

Estoy tratando de descubrir cómo usar JQuery para mostrar algunas herramientas cuando el usuario se mueve sobre un bloque de contenido. Por ejemplo, los bloques se representan de la siguiente manera con las herramientas inicialmente ocultos:

<div id="block_1"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

<div id="block_2"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

lo necesito para mostrar las herramientas para block_1 cuando el usuario se cierne sobre cualquier cosa en block_1.

veo que se puede utilizar comodines para hacer algo como:

$("*[id^=block_]").hover(
    function() { 
     // somehow toggle div.tools for this block 
    }, 
    function() { 
     // somehow toggle div.tools for this block 
    } 

No puedo imaginar cómo se puede alternar específicamente sólo los div.tools para ese bloque ...

Answer 1

hacer esto:

$("*[id^=block_]").hover(
    function() { 
     // Styles to show the box 
     $(this).children('.tools').css(...); 
    }, 
    function() { 
     // Styles to hide the box 
     $(this).children('.tools').css(...); 
    } 
); 

Es posible que desee considerar simplemente usando $.addClass() y $.removeClass(), ya que sería mucho más fácil de manejar.

Answer 2

EDITAR: en última instancia, si solo hace cambios de estilo simples, debe usar CSS para lograr esto. No javascript

Este CSS no funcionará para IE6, pero lo hará para prácticamente todos los demás navegadores modernos.

dar al padre block_ elementos de una clase como block, quitar los estilos en línea de tools, a continuación, hacer esto:

.block .tools { 
    display: none; 
} 
.block:hover .tools { 
    display: block; 
} 

---

Usted puede hacer esto:

$(function() { 
    $("div[id^=block_]").hover(function (e) { 
     $(this).children('.tools').toggle(e.type === 'mouseenter'); 
    }); 
}); 

Aunque creo Agregaría una clase común a los elementos block_ y seleccionaré por esa clase:

$(function() { 
    $("div.block").hover(function (e) { 
     $(this).children('.tools').toggle(e.type === 'mouseenter'); 
    }); 
}); 

HTML

<div class="block" id="block_1"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

<div class="block" id="block_2"> 
    <div class="tools" style="display:none;">Tools Here</div> 
</div> 

Dentro de controladores de eventos, la palabra clave this se refiere al elemento que ha recibido el evento. En este caso, el elemento con el ID block_n.

Luego usa the .children() method para seleccionar elemento (s) secundarios que tienen la clase tools.

The .toggle() method se puede utilizar para mostrar/ocultar elementos. Le di un argumento que es el resultado de probar el tipo de evento que tuvo lugar. Si el evento fue 'mouseenter', se mostrará .tools; de lo contrario, se ocultará.

El $(function() {...}); externo es un atajo para envolver su código en jQuery's .ready() method, lo que asegura que su código no se ejecute hasta que el DOM esté listo.

Puede dar the .hover() method dos funciones si lo prefiere. Entonces usaría los métodos .show() y .hide() en lugar de .toggle().

$(function() { 
    $("div[id^=block_]").hover(function() { 
     $(this).children('.tools').show(); 
    }, function() { 
     $(this).children('.tools').hide(); 
    }); 
}); 

Answer 3

$("*[id^=block_]").hover(function() { 
    $(this).children('.tools').toggle(); 
}); 

Answer 4

Usted podría intentar esto:

$(document).ready(function(){ 
$('#block_1').mouseover(function(e){ 
$('#block_2').show(); 
}); 
$('#block_1').mouseout(function(e){ 
$('#block_2').hide(); 
}); 
}); 

Aquí está añadiendo un bonito efecto de fundido:

$(document).ready(function(){ 
$('#block_1').mouseover(function(e){ 
$('#block_2').fadeIn('fast'); 
}); 
$('#block_1').mouseout(function(e){ 
$('#block_2').fadeOut('fast'); 
}); 
}); 

Answer 5

Finaly me pareció super solución simple para mi desplegable de mega sensible. Esto se basa en el atributo de datos html5. ¡Solo 3 líneas! ;)

$('.button, .content').hover(function() { 
    $($(this).data('coupling')).toggle(); 
});​ 

http://jsfiddle.net/QrEuQ/