Блог

Главная - Вопросы по программированию - Выберите родственного родителя при наведении курсора мыши с помощью jQuery

Выберите родственного родителя при наведении курсора мыши с помощью jQuery

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

Я пытаюсь изменить css .target , который является sibling родительского элемента .hover . Кажется, не могу заставить этот код работать — я не уверен, нужен ли мне $ (this) в начале моей функции или $ (‘.target’)… Я думаю, что это может быть .target, потому что это то, с помощью чего я меняю css .css() .

 <script type="text/javascript">
$(document).ready(function() {
    $('.hover').hover(
        function(){
            $(this).parent().siblings('.target').css('display', 'inline');
        },
        function(){
            $(this).parent().siblings('.target').css('display', 'none');
        }
    );
});
</script>

И вот моя догадка (которая также не работает):

 $('.target').parent(this).sibling().css('display', 'inline');

И вот html

 <div class="target" style="display: none;">
</div>
<div>
    <span class="hover">Hover</span>
</div>

Редактировать——————
Кажется, что это не работает, когда span есть class="hover" .

ОТРЕДАКТИРУЙТЕ numero dos ——————— Кажется, мои <span> два родителя были глубоко погружены и нуждались .parent().parent() в благодарностях.

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

1. Вы вызываете .sibling() (который не существует) или .siblings() (который существует)?

2. смотрите опубликованные ссылки на jsfiddle, class=»hover» отлично работает на промежутке 🙂

Ответ №1:

Предполагая, что ваш html соответствует вашим ожиданиям, и, не видя его, я не могу комментировать улучшения, это должно сработать:

 $('.target').parent().siblings('.target').css('display', 'inline');

Или, если .target элемент является следующим родственным элементом:

 $('.target').parent().next('.target').css('display', 'inline');

Или, если предыдущий sibling (и из html, который вы опубликовали, он является предыдущим sibling):

 $('.target').parent().prev('.target').css('display', 'inline');

Ссылки:

Ответ №2:

Энди, посмотри на эту скрипку, похоже, у тебя правильный код в первом примере, который ты опубликовал. Если бы вы могли опубликовать свой HTML-код, мы могли бы лучше провести время, помогая. http://jsfiddle.net/nKtzB/3/

Ответ №3:

Попробуйте использовать display:block вместо этого, если вы пытаетесь что-то сделать с блоком.

Ваш код по-прежнему в порядке, смотрите:http://jsfiddle.net/Mx4ks/1 /

Должно быть, что-то еще не так.. Попробуйте вставить свой HTML тоже 🙂

Посмотрите на свой собственный код в действии здесь: http://jsfiddle.net/Mx4ks /