Могу ли я скрыть родительский div при наведении курсора мыши на его дочерний элемент div?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Есть ли способ скрыть родительский div при наведении курсора мыши на div внутри него.

 <div class="parent" style="width:500px; height:800px;">
<div class="child" style="width:250px; height:250px; margin:250px auto 0 auto;">
</div>
</div>
  

Я хочу навести курсор на дочерний элемент, чтобы заставить его исчезнуть как родительский, так и дочерний элементы div.

Если есть способ даже с помощью jquery / javascript, пожалуйста, дайте мне знать.

У меня есть 4 родительских div и их соответствующий дочерний div, и когда я наведу курсор на другой родительский div, скрытый div снова появится.

Комментарии:

1. $('.child').hover(function() { $(this).parent().hide(); }); ?

2. Нет ли какой-либо проблемы с удобством использования? должен ли он появиться снова? когда? как?

3. jsfiddle.net/fApbK

Ответ №1:

Вы можете использовать событие mouseenter, а затем скрыть ближайшего родителя следующим образом

 $('.child').on('mouseenter',function(){
    $(this).closest('.parent').hide();
});
  

ДЕМОНСТРАЦИЯ

Комментарии:

1. Спасибо, но как я могу вернуть его обратно. У меня есть 4 родительских div с соответствующими дочерними div (ами). Я хочу показать этот скрытый родительский элемент при наведении курсора мыши на других родителей, чтобы скрыть их при наведении курсора мыши на их дочерний div.

2. Затем вы можете сделать то же самое, но выбрать родительский элемент и использовать $('.child').show();

Ответ №2:

 $('.child').on('mouseover',function(){
    $(this).parent().hide();
});
  

Комментарии:

1. и как я могу снова вернуть родительский div, когда curser находится в другом родительском div.

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

Ответ №3:

 $('.child').hover(function(){
   $(this).parent().hide();
}, 
function(){
   $(this).parent().show();
});
  

ДЕМОНСТРАЦИЯ:

http://jsfiddle.net/JsmVm/

Ответ №4:

Для этого вы можете использовать jquery hover.

 $('.child').hover(function(){
    $(this).parent().hide();
});
  

ДЕМОНСТРАЦИЯ

Примечание: функция наведения курсора мыши может обрабатывать как наведение курсора мыши, так и mouseenter, и лучше всего обрабатывать элемент пользовательского интерфейса.Например: Скрипка