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

Question

在这里有一个简单的问题。 我不确定是否可行，但是..我想在我的网站上运行工具提示功能。 但是，我希望它具有一定的动态性，因此我不必具有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();
});