JQuery Show Div on Hover - jquery

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

<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 está sobre cualquier elemento en block_1.

Veo que puedes usar comodines para hacer algo como:

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

Simplemente no puedo averiguar cómo puedes cambiar específicamente las herramientas div para ese bloque ...

Respuestas

9 para la respuesta № 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 usar $.addClass() y $.removeClass(), ya que sería mucho más fácil de gestionar.

---

11 para la respuesta № 2

EDITAR: En última instancia, si solo está haciendo cambios de estilo simples, debe usar CSS para lograr esto. No JavaScript.

Este CSS no funcionará para IE6, pero funcionará en casi todos los demás navegadores modernos.

Dar a los padres block_ elementos como una clase block, eliminar los estilos en línea de tools, entonces haz esto:

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

---

Podrías hacer esto:

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

Aunque creo que añadiría una clase común a la block_ Elementos y seleccione 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>

Controladores de eventos internos, la palabra clave this Se refiere al elemento que recibió el evento. En este caso, el elemento con el block_n CARNÉ DE IDENTIDAD.

Entonces usas el .children() método para seleccionar elementos secundarios que tengan la tools clase.

los .toggle() método Se puede utilizar para mostrar / ocultar elementos. Le he dado un argumento que es el resultado de probar el tipo de evento que tuvo lugar. Si el evento fue "mouseenter", el .tools Se mostrará, de lo contrario se ocultará.

El exterior $(function() {...}); es un atajo para envolver tu código jQuery s .ready() método, lo que garantiza que su código no se ejecute hasta que el DOM esté listo.

Puedes dar el .hover() método Dos funciones si lo prefieres. Entonces yo usaría el .show() y .hide() métodos en lugar de .toggle().

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

---

1 para la respuesta № 3

Podrías probar esto:

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

Aquí está agregando un buen efecto de fundido:

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

---

1 para la respuesta № 4

Finalmente encontré una solución súper simple para mi mega desplegable sensible. Esto se basa en el atributo de datos html5. ¡Sólo 3 líneas! ;)

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

http://jsfiddle.net/QrEuQ/

---

1 para la respuesta № 5

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

---