Hover mouseOver about element with same classe-CodePudding

I'm trying to create an information tree.

in my list there are some images and each one contains blocks of information,

the function I want to achieve is every time I move the mouse over one of the images its blocks of information that will be hidden appear and when I remove the mouse over the image the information disappears.

I don't have a lot of knowledge with programming logic so this is how far I've managed to go.

$("#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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

</head>
<body>
<div >
                <div >
                    <div >
                        <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" >
                    <div ></div>
                    <img src="https://i.imgur.com/mDU8frm.png" alt="">
                </div>
                <div >
                    <div >
                        <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>

CodePudding user response：

You can achieve this effect with CSS alone. No code needed.

In your stylesheet try something like this.

.elementToHide {
    display: none;
}

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

And in your HTML, use classes to mark which elements you want to hover/hide.

<div >
    Mouse Over This Element To Show Hidden Child
    <div >Hidden Content</div>
</div>

And in fact if you are using bootstrap, this can be accomplished even easier with a collapse component: https://getbootstrap.com/docs/5.0/components/collapse/