javascript - jQuery 工具提示和鼠标悬停集成

Question

我正在为一家建筑公司制作麻省理工学院的元素 map ，并试图弄清楚如何在鼠标移到弹出的相关工具提示上时保持红点鼠标悬停状态。现在，当鼠标移动到工具提示时，鼠标悬停会关闭。

此外，当单击工具提示中的点或链接时，我需要清除并关闭工具提示。我在 iPad 上注意到，在单击指向元素页面的工具提示链接然后使用后退按钮返回 map 页面后，最后一个工具提示由于某种原因保持打开状态。在台式机上接缝不是问题，但在移动设备上我需要在他们点击后退按钮时清除它。

这是我指的网站:http://www.digitour360.com/mit/样式表在这里:http://www.digitour360.com/mit/css/stylesheet.css

下面是每个按钮的圆形 sprite 的 CSS 代码 - 我试图以某种方式将它们与每个工具提示相关联。例如，如果鼠标移到红色圆圈按钮 11 上，然后移到按钮 11 的工具提示上，我不希望红色圆圈悬停状态在它离开工具提示之前关闭。

#button { background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px; display:block; height:23px; width:23px; } #button:hover { background-position:0 -25px; opacity: 1; }'

还有一件事，当单击其中的任何链接时，确保工具提示关闭的最佳方法是什么？出于某种原因，在移动设备上，当您用手指点击以打开悬停状态然后单击其上的链接时，如果您按下后退按钮，工具提示将保持打开状态。

Answer 1

您可以在每个工具提示上使用事件 onShow 和 onHide，并对触发器对象进行修改。我会用你的代码向你展示这个。 这是您的触发按钮 div:

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" id="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" id="button">Button 10</a>
</div>
...

以及相应的javascript:

$(".button-one").tooltip({
    position: "center right",
    delay:300,
    effect: 'slide',
    direction:'right',
    offset: [30, -12],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});

$(".button-two").tooltip({ 
    position: "bottom left",
    delay:300,
    effect: 'slide',
    direction:'left',
    offset: [-34, 20],
    slideOffset: 30,
    slideFade:'true',
    slideInSpeed:350,
    slideOutSpeed:250
});
...

首先，在 div 中的每个 a-tag 中都有属性 id="button"。这是绝对错误的。 ID 不得出现两次。所以最好将其更改为类:

<div id="eleven_div" class="button-eleven" style="display: block; ">
    <a href="projects/gantt/" class="button">Button 11</a>
</div>
<div id="ten_div" class="button-ten" style="display: block; ">
    <a href="projects/table/" class="button">Button 10</a>
</div>

现在放置要显示的红点的回调函数。每次显示或再次隐藏工具提示时都会调用该函数。并且它向触发 div 内的 a-tag 添加或删除一个类。新代码:

function hovering()
{
    this.getTrigger().find("a").first().toggleClass("hovered");
}

$(document).ready(function() {

    $(".button-one").tooltip({
        position: "center right",
        delay:300,
        effect: 'slide',
        direction:'right',
        offset: [30, -12],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });

    $(".button-two").tooltip({ 
        position: "bottom left",
        delay:300,
        effect: 'slide',
        direction:'left',
        offset: [-34, 20],
        slideOffset: 30,
        slideFade:'true',
        slideInSpeed:350,
        slideOutSpeed:250,
        onShow: hovering,
        onHide: hovering
    });
...

最后更改您的 CSS 代码，#button 的样式位于此位置:

.button {
    background:transparent url(../images/red-circle.png) no-repeat scroll 0px -2px;
    display:block;
    height:23px;
    width:23px;
    overflow:hidden;
    text-indent:-999em;
    cursor:pointer;
    opacity: 1;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
}

/**
 * mouseover state, 
 * elements with the "hovered" class now behave
 * like ones in mouseover state
 */
.button:hover, .button.hovered{
    background-position:0 -25px;    
    opacity: 1;
}

/* clicked state */
.button:focus {
    background-position:0 -25px;
}

---

要在单击链接时关闭工具提示，请将此代码放在工具提示定义之后:

$(".tooltip, .tooltip-brite, ... all your tooltip-classes").live("click", function() {  
    $(this).prev().tooltip().hide();
});

$(".button-two, .button-one, ... all your button-classes").live("click", function() {   
    $(this).tooltip().hide();
});

这将在单击带有红点的 div 或工具提示框时关闭工具提示。