Как отобразить кнопку и поделить вокруг графика. js - PullRequest
Новая
       4

Как отобразить кнопку и поделить вокруг графика. js

0 голосов
/ 10 марта 2020

Я студент, довольно плохо знакомый с javascript / css.

Я пытаюсь отобразить кнопку вокруг холста. И я хотел бы показать какой-нибудь текст за кнопкой при наведении на них курсора (для этого я использовал div).

Но у меня возникли трудности с настройкой позиции div, когда они должны находиться за кнопкой. расположен горизонтально.

Вот изображения, показывающие, что здорово: кнопка расположена вертикально (при наведении курсора на одну из кнопок по вертикали)

[) :

Вот изображения, показывающие, что я получил / проблема (1 изображение = 1 наведение мыши на одну из кнопок

первая горизонтальная кнопка в порядке

третья горизонтальная кнопка действительно не в порядке

И вот мой код:

index. 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>

index. 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;}
...