JQuery Покажи Div на Hover - jquery

Опитвам се да разбера как да използвам JQuery, за да покажа някои инструменти, когато потребителят се движи над съдържателен блок, например блоковете се показват, както следва, с първоначално скритите инструменти:

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

Трябва ми да покажа инструментите за блок_1, когато потребителят се движи над всичко в блок_1.

Виждам, че можете да използвате заместващи символи, за да направите нещо като:

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

Просто не мога да разбера как можете да превключите само на div.tools за този блок ...

Отговори:

9 за отговор № 1

Направите това:

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

Може да помислите просто да използвате $.addClass() и $.removeClass(), тъй като би било много по-лесно да се управлява.

---

11 за отговор № 2

EDIT: В крайна сметка, ако просто правите прости промени в стила, трябва да използвате CSS, за да постигнете това. Не е javascript.

Този CSS няма да работи за IE6, но за почти всички останали съвременни браузъри.

Дайте на родителя block_ елементи като клас block, премахване на вградените стилове от tools, след това направете следното:

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

---

Можете да направите това:

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

Въпреки че мисля, че бих добавил обща класа към block_ елементи и изберете от този клас:

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

Вътрешните събирачи на събития, ключовата дума this се отнася до елемента, който е получил събитието. В този случай елементът с block_n ДОКУМЕНТ ЗА САМОЛИЧНОСТ.

След това използвате на .children() метод за да изберете елемента на дете, който има tools клас.

Най- .toggle() метод може да се използва за показване / скриване на елементи. Дадох му аргумент, който е резултат от тестването на типа събитие, което се е случило "mouseenter", .tools ще бъде показано, в противен случай ще бъде скрито.

Външната $(function() {...}); е бърз достъп за опаковане на вашия код JQuery "S .ready() метод, което гарантира, че кодът ви няма да работи, докато DOM не е готов.

Можете да дадете на .hover() метод две функции, ако предпочитате. Тогава ще използвам .show() и .hide() методи вместо .toggle().

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

---

1 за отговор № 3

Можете да опитате това:

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

Тук добавяме хубав ефект на избледняване:

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

---

1 за отговор № 4

Накрая намерих супер просто решение за моето отзивчиво мега падащо меню. Това се основава на атрибута html5 data. Само 3 реда! )

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

http://jsfiddle.net/QrEuQ/

---

1 за отговор № 5

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

---