Question

这里有个问题。我不确定这是否可行但是..我希望在我的网站上有一个tooltip-ish功能。但是，我希望它有点动态，所以我不必拥有100个独特的div。

如果我有4个div，看起来是一样的，我怎样才能在div中显示div中的工具提示？

示例

<div id="theLink" class="123">
    <img src="images/icons/icon_pc.png" alt="">

    <div class="tooltip_websites">
          <div class="arrow_up"></div>
          <p>aiuwd hiau dhwuiaw diuah dwiauh dwaiuwd haiwudh</p>
    </div> <!-- end tooltip_websites -->
</div> <!-- end bullet-circle -->

如果我有4个这样的div，当我悬停#thelink时，我想显示当前div的“tooltip_website”？并没有展示其他三个？

现在我正在使用：

$("#theLink").hover(
    function () {
        $(".tooltip_websites").stop(true).fadeIn();
    },
    function () {
        $(".tooltip_websites").stop(true).fadeOut();
});

但如果我想要它更有活力，我该怎么办？

Answer 1

使用.find()仅定位所选dom中的元素：

$("#theLink").hover(
function () {
    $(this).find(".tooltip_websites").stop(true).fadeIn();
},
function () {
     $(this).find(".tooltip_websites").stop(true).fadeOut();
});

Answer 2

使用this

$(".tooltip_websites",this).stop(true).fadeIn();

Answer 3

如果我有4个这样的div，那该怎么办

ID必须是唯一的而是使用类。

将您的HTML更改为

<div class="theLink" class="123">

JavaScript

$(".theLink").hover(
    function () {
        $(this).find(".tooltip_websites").stop(true).fadeIn();
    },
    function () {
        $(this).find(".tooltip_websites").stop(true).fadeOut();
});

悬停时查找并显示隐藏的div

3 个答案: