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

Question

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

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

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

Answer 1

Вместо этого установите нулевую непрозрачность:

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

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

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

Answer 3

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

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

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

Со страницы jQuery Hover .

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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