代码之家 › 专栏 › 技术社区 › Carlos Eduardo

将鼠标悬停在具有相同类的元素上

css html javascript

Carlos Eduardo · 技术社区 · 2 年前

我正在尝试创建一个信息树。

在我的列表中有一些图像,每个图像都包含信息块,

我想要实现的功能是,每次我将鼠标移到其中一个图像上时,就会出现隐藏的信息块,当我将鼠标移到图像上时,信息就会消失。

$("#beginner").mouseover(function () {
    $(".base_beginner").css("display", "flex");
    $(".patente-name").show();
});

$("#beginner").mouseleave(function () {
    $(".base_beginner").css("display", "none");
    $(".patente-name").hide();
});

let patentLength = $(".patente");

$(window).on("load", function () {
    for (let i = 0; i < patentLength.length; i++) {
        patentLength.mouseover(function () {
            console.log($(".base_" + $(this).attr("id")));
        })
    }
});

.box-p {
  width: 100%;
  height: 199px;
  background: url(https://i.imgur.com/pwIWOae.png) no-repeat center;
  margin: 55px 0;
}

.base {
  text-align: center;
  display: none;
  align-items: center;
}

.patente-name {
  display: none;
}

/*/ Beginner Base /*/
.base_beginner {
  width: 315px;
  height: 179px;
  background: url(https://i.imgur.com/OWJVG56.png) no-repeat;
}

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

</head>
<body>
<div class="box-p d-flex align-items-center">
                <div class="base_beginner base">
                    <div class="base-info mx-auto">
                        <p>0 ~ 50 Resets</p>
                        <p>Pontos por reset: 600</p>
                        <p>NÃvel para resetar: 400 | 380 | 370</p>
                    </div>
                </div>
                <div id="beginner" class="patente d-table mx-auto mt-3">
                    <div class="patente-name text-center text-uppercase font-weight-bold"></div>
                    <img src="https://i.imgur.com/mDU8frm.png" alt="">
                </div>
                <div class="base_beginner base">
                    <div class="base-info mx-auto">
                        <b>Recompensas</b>
                        <p>7 dias vip Godz</p>
                        <p>1 set +9 excelent por 3 dias</p>
                        <p>1 panda 3 dias</p>
                    </div>
                </div>
            </div>
            <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>

1 回复 | 直到 2 年前

dqhendricks 2 年前

您可以单独使用CSS来实现此效果。无需代码。

.elementToHide {
    display: none;
}

.showHiddenChildOnHover:hover .elementToHide {
    display: block;
}

在HTML中,使用类来标记要悬停/隐藏的元素。

<div class="showHiddenChildOnHover">
    Mouse Over This Element To Show Hidden Child
    <div class="toHide">Hidden Content</div>
</div>

https://getbootstrap.com/docs/5.0/components/collapse/