javascript - 如何在 chart.js 周围显示按钮和 div
问题描述
我是一个对 javascript/css 很陌生的学生。
我正在尝试在画布周围显示按钮。当我将鼠标悬停在按钮上时，我想在按钮后面显示一些文本（为此我使用了 div）。
但是当他们应该在水平放置的按钮后面时，我很难设置 div 的位置。
这是显示什么是伟大的图片：按钮放置垂直（鼠标悬停在一个垂直按钮上）
[
这是显示我得到的/问题的图片（1 张图片 = 1 鼠标悬停在其中一个按钮上
这是我的代码：
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>crapmoni while waiting</title>
</head>
<body >
<link rel="stylesheet" type="text/css" href="./style/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="/dist/build.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
<script src="https://unpkg.com/vue"></script> <!-- Script pour les dates en vue js -->
<script type="text/javascript" src="./JQUERY/libs/jquery-3.4.1.min.js"></script> <!-- FONCTIONNE NORMALEMENT -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app"> <!--DIV CONTENANT NOTRE GRAPHIQUE-->
<div class="container-fluid">
<div class="col-md-1" id="listeBtn2" style="width: 4.3333%" > <!--col md1 resizer a 4.33% -->
<button class="P2btnSite0 P2btnSite"><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax0 NameMax">CampingAtlantiqueFlux</div>
<button class="P2btnSite1 P2btnSite"><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax1 NameMax">ChadotelFlux</div>
<button class="P2btnSite2 P2btnSite" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax2 NameMax">CybeleVacancesFlux</div>
<button class="P2btnSite3 P2btnSite" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax3 NameMax">EurocampFlux</div>
<button class="P2btnSite4 P2btnSite" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax4 NameMax">HomairFlux</div>
<button class="P2btnSite5 P2btnSite" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax5 NameMax">MadameVacancesFlux</div>
<button class="P2btnSite6 P2btnSite" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax6 NameMax">MisterCampFlux</div>
<button class="P2btnSite7 P2btnSite" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P2NameMax7 NameMax">PausadoFlux</div>
</div> <!--ferme le col md 1 -->
<div class="col-md-3" >
<div class="card" id="Graphique1">
<button id="btnlineChart2" class="btnlineChart2"> <img src="./images/icons8-graphique-24.png"></button>
<button id="btnZoom2" class="btnZomm2"> <img src="./images/icons8-zoom-agrandir-25.png"></button>
<div id="smileyP2" class="smileyP2"></div> <!--permet d'y inserer une image grasse innerHttml-->
<canvas id="bar-chart-grouped2" class="HzBarChart2" height="400" > </canvas>
</div> <!--ferme le card-->
<button class="test P1btnSite00"><img src="./images/icons8-histogramme-25.png"> </button>
<button class="test P1btnSite01"><img src="./images/icons8-histogramme-25.png"> </button>
<button class="test P1btnSite02" ><img src="./images/icons8-histogramme-25.png"> </button>
<div class="P1NameMax00 NameMax">data1</div>
<div class="P1NameMax01 NameMax">data2</div>
<div class="P1NameMax02 NameMax">data3</div>
</div> <!--ferme le col md 3 -->
</div>
</div> <!--**********close app !! ************-->
</body>
</html>
索引.css
button.test{
margin-top: 15px;
margin-right: 30px;
}
div.NameMax
{
visibility: hidden;
}
/* Button which are placed horizontaly to the canvas*/
button.P1btnSite00:hover ~ div.P1NameMax00{
visibility: visible;
}
.P1btnSite00:hover{background-color:#5cbf2a;}
button.P1btnSite01:hover ~ div.P1NameMax01{
visibility: visible;
}
.P1btnSite01:hover{background-color:#5cbf2a;}
div.P1NameMax01{
margin-left: 70px;
margin-bottom: 80px;
}
button.P1btnSite02:hover ~ div.P1NameMax02{
visibility: visible;
}
.P1btnSite02:hover{background-color:#5cbf2a;}
div.P1NameMax02{
margin-left: 140px;
margin-bottom: 80px;
}
/* Button which are placed verticaly to the canvas*/
button.P2btnSite0:hover ~ div.P2NameMax0{
visibility: visible;
}
.P2btnSite0:hover{background-color:#5cbf2a;}
button.P2btnSite1:hover ~ div.P2NameMax1{
visibility: visible;
}
.P2btnSite1:hover{background-color:#5cbf2a;}
button.P2btnSite2:hover ~ div.P2NameMax2{
visibility: visible;
}
.P2btnSite2:hover{background-color:#5cbf2a;}
button.P2btnSite3:hover ~ div.P2NameMax3{
visibility: visible;
}
.P2btnSite3:hover{background-color:#5cbf2a;}
button.P2btnSite4:hover ~ div.P2NameMax4{
visibility: visible;
}
.P2btnSite4:hover{background-color:#5cbf2a;}
button.P2btnSite5:hover ~ div.P2NameMax5{
visibility: visible;
}
.P2btnSite5:hover{background-color:#5cbf2a;}
button.P2btnSite6:hover ~ div.P2NameMax6{
visibility: visible;
}
.P2btnSite6:hover{background-color:#5cbf2a;}
button.P2btnSite7:hover ~ div.P2NameMax7{
visibility: visible;
}
.P2btnSite7:hover{background-color:#5cbf2a;}