Bonjour,
Je suis en train de concevoir un menu qui a 9 entrées. Chaque entrée est composée d'un bloc qui contient une image et un libellé en-dessous. Le libellé peut être sur une ou deux ligne (longueur du libellé), voir image. Quand je suis sur l’image, elle change et quand je suis sur le libelle, la couleur de fond derrière le libellé change.J'ai essayé plusieurs techniques sans résultats, je fais appel au forum pour essayer de trouver une solution probante. Je vous joins le code actuel (test). Dans ce code, j'ai essayé de regrouper le couple 'image+libellé' pour effectuer un changement d'ensemble, image et couleur de fond.
Modifié par luxojr (13 Mar 2020 - 11:59)
Je suis en train de concevoir un menu qui a 9 entrées. Chaque entrée est composée d'un bloc qui contient une image et un libellé en-dessous. Le libellé peut être sur une ou deux ligne (longueur du libellé), voir image. Quand je suis sur l’image, elle change et quand je suis sur le libelle, la couleur de fond derrière le libellé change.J'ai essayé plusieurs techniques sans résultats, je fais appel au forum pour essayer de trouver une solution probante. Je vous joins le code actuel (test). Dans ce code, j'ai essayé de regrouper le couple 'image+libellé' pour effectuer un changement d'ensemble, image et couleur de fond.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style type="text/css">
body {
background-color: rgb(246,245,244);
}
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.entree-1 {
background-color: #F00;
float: left;
height: 90px;
width: 110px;
}
.entree-1 .image-1 {
height: 56px;
width: 110px;
background-image: url(1-toutes-les-contributions-off.png);
background-repeat: no-repeat;
}
.entree-1 .libelle-1 {
height: 34px;
width: 110px;
background-color: rgb(171,157,147);
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFF;
text-align: center;
text-decoration: none;
display: block;
}
/*ul.menu-handiapason li a.simple {*/
libelle-simple {
padding: 8px 0 8px 0;
height: 18px;
line-height: 18px;
display: block;
}
/*ul.menu-handiapason li a.double {*/
libelle-double {
padding: 4px 0 4px 0;
height: 26px !important;
line-height: 13px;
display: block;
}
.entree-1 a:hover div{
background-image: url(1-toutes-les-contributions-on.png);
background-repeat: no-repeat;
}
.entree-1 a:hover span{
background-color: #F00;
}
</style>
</head>
<body>
<div class="container">
<a href="">
<div class="entree-1">
<div class="image-1"></div><!--image-1-->
<span class="libelle-1 libelle-double">TOUTES LES CONTRIBUTIONS</span><!--libelle-1-->
</div><!--entree-1-->
</a>
</div>
<!--container-->
</body>
</html>Modifié par luxojr (13 Mar 2020 - 11:59)