简单的jQuery问题，嵌套的选择器和父级

Posted 2021-04-13

我想悬停一个图像并弹出一个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();

所以我的实际问题是：如何修复上面的行以使其有效。还是我完全错了？

答案

由于div似乎总是在img之后的元素，你可以使用.next()：

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

或使用过滤器以确保安全：

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

另一答案

你可以用

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

这会找到下一个兄弟并显示它。它强烈依赖于DOM结构。更通用的解决方案可能是使用$(this).nextAll('div')...或$(this).parent().find('div')...。