JQuery Zobraziť Div na Hover - jquery

Snažím sa zistiť, ako používať nástroj JQuery na zobrazenie niektorých nástrojov, keď sa používateľ pohybuje nad blokom obsahu. Napríklad bloky sa zobrazujú nasledovne s pôvodne skrytými nástrojmi:

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

Potrebujem, aby som zobrazil nástroje pre block_1, keď sa používateľ vznáša nad čímkoľvek v bloku_1.

Vidím, že môžete použiť zástupné znaky na niečo podobné:

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

Len môžem zistiť, ako môžete konkrétne prepínať iba div.tools pre tento blok ...

odpovede:

9 pre odpoveď č. 1

To urobiť:

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

Možno budete chcieť zvážiť len pomocou $.addClass() a $.removeClass(), pretože by to bolo oveľa jednoduchšie riadiť.

---

11 pre odpoveď č. 2

EDIT: Nakoniec, ak robíte len jednoduché zmeny štýlu, na dosiahnutie tohto cieľa by ste mali použiť CSS.

Tento CSS nebude pracovať pre IE6, ale bude to pre všetky ostatné moderné prehliadače.

Dajte rodičovi block_ prvky triedy ako block, odstráňte inline štýly z tools, potom postupujte takto:

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

---

Môžete to urobiť:

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

Aj keď si myslím, že by som pridal spoločnú triedu block_ a vyberte podľa tejto triedy:

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

Vnútri obsluhy udalostí, kľúčové slovo this odkazuje na prvok, ktorý prijal udalosť. V tomto prípade sa prvok s block_n ID.

Potom používate na .children() metóda vyberte podriadený element (y), ktoré majú tools trieda.

Na .toggle() metóda možno použiť na zobrazenie / skrytie prvkov. Dal som jej argument, ktorý je výsledkom testovania typu udalosti, ktorá sa odohrala "mouseenter", .tools zobrazí sa, inak bude skrytý.

Vonkajšie $(function() {...}); je skratka pre zabalenie kódu jQuery "s .ready() metóda, Ktorý zabezpečuje, že váš kód nie je spustený, kým DOM je pripravený.

Môžete dať na .hover() metóda ak chcete, dve funkcie. Potom som použil .show() a .hide() metódy namiesto .toggle().

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

---

1 pre odpoveď č. 3

Môžete to vyskúšať:

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

Tu je pridanie pekného efektu fade:

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

---

1 pre odpoveď č. 4

Konečne som našiel super jednoduché riešenie pre moje citlivé mega dropdown. Toto je založené na dátovom atribúte html5. Iba 3 riadky! ;)

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

http://jsfiddle.net/QrEuQ/

---

1 pre odpoveď č. 5

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

---