JQuery Show Div on Hover

Question

Я пытаюсь выяснить, как использовать 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> 

мне это нужно, чтобы показать инструменты для block_1, когда пользователь парит над чем в block_1.

Я вижу, что вы можете использовать подстановочные знаки, чтобы сделать что-то вроде:

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

Я просто не могу понять, как вы можете конкретно переключить только в div.tools для этого блока ...

Answer 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(), как это было бы гораздо легче управлять.

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

Затем вы используете the .children() method для выбора дочерних элементов, которые имеют класс tools.

The .toggle() method может использоваться для отображения/скрытия элементов. Я дал ему аргумент, который является результатом тестирования типа события, которое имело место. Если событие было 'mouseenter', будет показано значение .tools, в противном случае оно будет скрыто.

Внешний $(function() {...}); является ярлыком для упаковки вашего кода в jQuery's .ready() method, который гарантирует, что ваш код не будет работать до тех пор, пока DOM не будет готов.

Вы можете дать the .hover() method две функции, если хотите. Затем я использовал бы методы .show() и .hide() вместо .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

Вы можете попробовать это:

$(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'); 
}); 
}); 

Answer 5

Finaly я нашел супер простое решение для моей отзывчивым мега выпадающего меню. Это основано на атрибуте данных html5. Всего 3 линии! ;)

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

http://jsfiddle.net/QrEuQ/