JQuery Show Div auf Hover - Jquery

Ich versuche herauszufinden, wie man mit JQuery einige Werkzeuge anzeigt, wenn der Benutzer sich über einem Inhaltsblock befindet. Die Blöcke werden beispielsweise wie folgt dargestellt, wobei die Werkzeuge anfangs ausgeblendet sind:

<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>

Ich brauche es, um die Werkzeuge für Block_1 anzuzeigen, wenn der Benutzer über irgendetwas in Block_1 schwebt.

Ich sehe, dass Sie Platzhalter verwenden können, um Folgendes zu tun:

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

Ich kann einfach nicht herausfinden, wie Sie die div.tools für diesen Block gezielt umschalten können ...

Antworten:

9 für die Antwort № 1

Mach das:

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

Vielleicht möchten Sie nur überlegen $.addClass() und $.removeClass(), da es viel einfacher zu handhaben wäre.

---

11 für die Antwort № 2

BEARBEITEN: Wenn Sie nur einfache Stiländerungen vornehmen, sollten Sie CSS verwenden, um dies zu erreichen. Nicht Javascript.

Dieses CSS funktioniert nicht für den IE6, aber für fast alle anderen modernen Browser.

Gib dem Elternteil block_ Elemente wie eine Klasse blockEntfernen Sie die Inline-Stile aus toolsdann mach das:

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

---

Du könntest das tun:

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

Obwohl ich denke, dass ich der block_ Elemente und wählen Sie von dieser Klasse:

$(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>

Innerhalb der Ereignisbehandlungsroutinen das Schlüsselwort this bezieht sich auf das Element, das das Ereignis erhalten hat. In diesem Fall ist das Element mit der block_n ICH WÜRDE.

Dann benutzt du das .children() Methode um untergeordnete Elemente auszuwählen, die über die tools Klasse.

Das .toggle() Methode kann zum Anzeigen / Ausblenden von Elementen verwendet werden. Ich habe ihm ein Argument gegeben, das das Ergebnis des Testens des Ereignistyps ist, der stattgefunden hat. Wenn das Ereignis der Fall war "mouseenter", das .tools wird angezeigt, andernfalls wird es ausgeblendet.

Das Äußere $(function() {...}); ist eine Abkürzung, um Ihren Code einzubinden jQuery "s .ready() MethodeDadurch wird sichergestellt, dass Ihr Code nicht ausgeführt wird, bis das DOM bereit ist.

Du kannst Geben das .hover() Methode zwei Funktionen, wenn Sie es vorziehen. Dann benutze ich die .show() und .hide() Methoden statt .toggle().

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

---

1 für die Antwort № 3

Du könntest das versuchen:

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

Hier wird ein schöner Fade-Effekt hinzugefügt:

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

---

1 für die Antwort № 4

Schließlich fand ich eine super einfache Lösung für mein responsives Mega Dropdown. Dies basiert auf dem html5-Datenattribut. Nur 3 Zeilen! ;)

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

http://jsfiddle.net/QrEuQ/

---

1 für die Antwort № 5

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

---