Простой вопрос jQuery, вложенные селекторы и родитель - PullRequest
2 голосов
/ 11 мая 2010

Я хотел бы навести изображение и открыть div без плагинов. просто базовый JQuery jQuery выглядит так:

<script type="text/javascript">
$(document).ready(function() {
    $(".wrapperfortooltip div img").hover(
        function() {
            $(this).css('border', 'solid 1px #E90E65');
            $("div", this).stop().fadeIn();
        },
        function() {
            $(this).css('border', '1px solid #3E3D3D');
            $("div",this).stop().fadeOut();
        }
    );
});
</script>

HTML выглядит так:

<div class="wrapperfortooltip">
    <div style="position:relative;">
        <img src="images/question.gif" alt="Tooltip" style="border: 1px solid #3E3D3D;" />
        <div class="tooltipVzw" style="position: absolute; display: none; width: 215px; top: 0px; left: -235px; ">
            Message to display nr one
        </div>
    </div>
    <div style="position:relative;">
        <img src="images/question.gif" alt="Tooltip" style="border: 1px solid #3E3D3D;" />
        <div class="tooltipVzw" style="position: absolute; display: none; width: 215px; top: 0px; left: -235px; ">
            Message to display
        </div>
    </div>
</div>

CSS (для кого может быть интересно)

.tooltipVzw
{
    border: solid 1px #3e3d3d;
    color: #cfc6ca;
    font-size: 11px;
    padding: 9px 9px 9px 9px;
    background-image: url(images/tooltipvzwbg.jpg);
    background-repeat:repeat-x;
    background-color:#1c1c1c;
    text-align:left;
    line-height: 16px;
}

Теперь я должен найти способ изменить

$("div", this).stop().fadeIn();

примерно так:

$(this).parent().("div").stop().fadeIn();

Итак, мой актуальный вопрос: как мне исправить приведенную выше строку, чтобы она работала или я совершенно не прав?

Ответы [ 2 ]

5 голосов
/ 11 мая 2010

Поскольку div кажется элементом после img, вы можете просто использовать .next():

$(this).next().stop().fadeIn();

или с безопасным фильтром:

$(this).next('.tooltipVzw').stop().fadeIn();
0 голосов
/ 11 мая 2010

Вы можете использовать

 $(this).next().stop().fadeIn();

Находит следующего брата и отображает его. Это сильно зависит от структуры DOM. Более общим решением может быть использование $(this).nextAll('div')... или $(this).parent().find('div')....

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...