Наведите указатель мыши на скрытый элемент, чтобы показать его

Есть ли способ навести курсор на элемент, который уже скрыт. Я пытаюсь имитировать то, что Steam делает со своей навигацией по стрелке на своей домашней странице. Вы заметите, что когда вы впервые попадаете на страницу, стрелок не показывает:

enter image description here

Затем, когда вы наводите курсор на область, где должна быть стрелка, она показывает себя:

enter image description here

Я попытался установить мои divs, содержащие изображения стрелок, на display: none, а также попробовал visibility: hidden, но ни один из них не работает с методами hover или mouseover в jQuery. Я бы подумал, что visibility: hidden заставит его работать, но это, похоже, не так. Есть ли какой-либо другой способ скрыть эти div с самого начала, но все же иметь возможность иметь на них зависающие события?

Ответы

Ответ 1

Установите вместо него непрозрачность нуля:

$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

http://jsfiddle.net/mblase75/bzaax/

Ответ 2

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

Ниже приведен пример метода непрозрачности с использованием только CSS, он также будет работать с зависанием jQuery.

CSS

#it {
    opacity: 0;
    width: 500px;
    height:500px;
}

#it:hover {
    opacity: 1;
}

Вот пример отображения одного элемента, когда другой зависает:

HTML:

<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>

JQuery

$("#me").hover(function(){
   $("#else").show();
},function(){
   $("#else").hide();
});

Ответ 3

Используйте метод .fadeTo jQuery, чтобы изменить непрозрачность элемента при наведении.

Сайт jQuery содержит пример, но что-то вроде этого должно быть достаточно

$("element").hover(//On Hover Callback
                   function() {$(this).fadeOut(100);} ,
                   //Off Hover Callback 
                   function() {$(this).fadeIn(500);})

На странице jQuery Hover.

Ответ 4

Вы можете установить его на opacity: 0.

Чтобы сделать это кросс-браузером, вы, вероятно, хотели бы сделать это с помощью jQuery tho.

Ответ 5

Один из способов сделать это - использовать альтернативный тест-тест div, чтобы он не содержал контент, но когда он зависал над ним, отображается div "стрелка". Когда "div" "стрелка" (или div-test-div) выйдет, то div "стрелка" снова будет скрыт.

В качестве альтернативы вы можете использовать один и тот же div для теста удара и "стрелки", так что фоновое изображение используется для визуальных элементов div. При наведении курсора вы можете настроить смещение изображения на позицию, в которой будет отображаться "стрелка". Когда вы выходите, вы установите смещение фона в положение, в котором изображение стрелки больше не будет отображаться.

И, наконец, если контент всегда будет находиться в том же месте, что и область тестирования, вы можете установить непрозрачность div на ноль и соответственно переключиться.

Ответ 6

Вы можете установить непрозрачность элементов на 0. Это позволит им получать события наведения (на самом деле mouseenter и mouseleave), но, как практический вопрос, сделать их невидимыми для пользователей.