Question

我目前正在构建一个菜单栏，其中包含图标，这些图标在悬停时显示上下文子菜单。基本上，当鼠标悬停在图标上时会出现一个弹出菜单/工具提示（包含更多选项），但图标本身也应该是可点击的。

到目前为止，我为每个菜单项使用以下HTML构造和jQuery：

<div id="profile" class="menu-item">
    <div id="profile-tip" class="tip">
        **insert profile menu options**
    </div>
</div>

<div id="search" class="menu-item">
    <div id="search-tip" class="tip">
        **insert search menu options**
    </div>
</div>

和

$(".menu-item").hover(function() {
    $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $(this).find("div").hide();
});
});

我想要做的是将HTML更改为如下所示（因此我可以将onClick链接应用于“profiles”div）：

<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
    <div id="profile-tip" class="tip">
        **insert menu options**
    </div>

但是，我不知道如何修改jQuery以找到匹配的div在悬停时显示。相关的工具提示/弹出菜单div将始终为xxxx-tip（其中xxx是父div的名称）。

作为一个例子，我想它会看起来像这样（记住我对jQuery知之甚少所以我很清楚这看起来很愚蠢）：

$(".menu-item").hover(function() {
    $.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $.find("div").attr('id'+"-tip").hide();
});
});

总结一下：我需要修改jQuery以根据父div的ID +字符串“-tip”显示div

希望这不会太混乱。任何帮助非常感谢：）

Answer 1

我不确定我完全理解你想要的东西，但也许可以尝试一下这样的东西：

$(".menu-item").hover(
    function() {
        $(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $(this).find(".tip").hide();
    }
);

编辑：如果tip元素不是菜单项div的子元素，则可以使用：

$(".menu-item").hover(
    function() {
        $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $('#' + this.id + '-tip').hide();
    }
);

Answer 2

我不是100％清楚这里的目标，但你可以通过ID得到你的div，如下所示：

$(".menu-item").hover(function()
{
    $(this).find(".tip").fadeIn("fast").show();
});

或者在CSS中：

.menu-item .tip
{
    display: none;
}

.menu-item .tip:hover,
.menu-item:hover .tip
{
    display: auto;
}

Answer 3

使用jQuery找到工具提示，而不是在你所徘徊的东西的PARENT中找到div的名称，而是搜索你所追踪的东西......搜索DOM，而不是UP。

Use jQuery's $(this) operator ...

$('.menu-item').hover(function(){
     $(this).find('.tip).fadeIn();


},
function() {
    $(this).find('.tip).fadeOut();
});

jQuery找到div帮助

3 个答案: