JQuery Pokaż Div na Hover

Question

Próbuję dowiedzieć się, jak używać JQuery do wyświetlania niektórych narzędzi, gdy użytkownik unosi się nad blokiem treści. Na przykład, bloki są wyświetlane w następujący sposób z narzędziami początkowo ukryte:

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

muszę go pokazać narzędzia block_1 gdy użytkownik znajduje się nad czymś w block_1.

widzę, że można używać symboli wieloznacznych, aby zrobić coś takiego:

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

po prostu nie może dowiedzieć się, w jaki sposób można włączyć tylko te specjalnie div.tools dla tego bloku ...

Answer 1

Wykonaj:

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

można rozważyć tylko przy użyciu $.addClass() i $.removeClass(), jak byłoby znacznie łatwiejsze do zarządzania.

Answer 2

EDYCJA: Ostatecznie, jeśli po prostu robisz proste zmiany stylu, powinieneś użyć CSS, aby to osiągnąć. Nie javascript.

Ten CSS nie będzie działał dla IE6, ale będzie to dotyczyło prawie wszystkich innych nowoczesnych przeglądarek.

Daj rodzic block_ elementy klasę jak block, usunąć style inline od tools, to zrobić:

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

Chociaż myślę:

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

---

Można to zrobić Dodałbym wspólną klasę do elementów block_ i wybrałam według tej klasy:

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

Wewnątrz obsługi zdarzeń, słowo this odnosi się do elementu, który otrzymał wydarzenie. W tym przypadku element z identyfikatorem block_n.

Następnie należy użyć elementu the .children() method, aby wybrać element (y) potomny z klasą tools.

The .toggle() method może być używany do pokazywania/ukrywania elementów. Podałem mu argument, który jest wynikiem testowania rodzaju zdarzenia, które miało miejsce. Jeśli wydarzenie miało numer 'mouseenter', zostanie wyświetlony komunikat .tools, w przeciwnym razie zostanie ukryty.

Zewnętrzny $(function() {...}); to skrót do zawijania kodu w jQuery's .ready() method, który zapewnia, że ​​twój kod nie będzie działał, dopóki DOM nie będzie gotowy.

Możesz dać the .hover() method dwie funkcje, jeśli wolisz. Następnie użyłbym metod .show() i .hide() zamiast .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

Można spróbować to:

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

Tutaj jest dodanie ładny efekt zanikania:

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

Answer 5

Finaly znalazłem bardzo proste rozwiązanie dla mojego reagującego mega menu. Jest to oparte na atrybucie danych html5. Tylko 3 linie! ;)

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

http://jsfiddle.net/QrEuQ/