Issue
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/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>
Solution
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 class="showHiddenChildOnHover">
Mouse Over This Element To Show Hidden Child
<div class="toHide">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/
Answered By - dqhendricks
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.