Image de fond qui change lors d'un hover sur un btn
lamontange Messages postés 130 Date d'inscription Statut Membre Dernière intervention -
Bonsoir,
Je souhaiterais changer l'opacité d'une image de fond lors d'un hover sur un bouton.
Je ne trouve pas comment faire sur Internet :(
Mes CSS :
.img {
overflow-x: hidden;
overflow-y: visible;
top: 0;
left: 0;
bottom: 0;
right: 0;
width:100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url(./images/Attention.jpg);
opacity: 0.1;
z-index: -1;}
}
#button {
vertical-align: middle;
height: 100%;
z-index: 2;
}
.button {
text-align: center;
height: 100%;
margin-top: 20%;
}
Merci pour votre aide/explications ^^
LM
Macintosh / Chrome 107.0.0.0
- Image de fond qui change lors d'un hover sur un btn
- Changer de dns - Guide
- Image iso - Guide
- Enlever le fond d'une image - Guide
- Comment mettre un fond de couleur sur libreoffice writer - Guide
- Comment mettre une vidéo en fond d'écran - Guide
9 réponses
Bonjour,
Déjà, tout dépend de la structure de ton code html ( qu'il faut donc nous montrer...)
Ensuite, il se peut qu'il soit plus facile de le gérer via du javascript..
Bonsoir jordane45,
Ci-dessous mon maigre html (c'est pour une page toute simple que je viens d'attaquer) :
<body> <div id="texte"> <h1>TITRE</</h1> <div id="button"> <div class="button"> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-success">Success</button></div> <div class="img"> </div> </div></div> </body>
Mais moi et le js...
Je comprends tout juste les CSS lol
Merci et bonne soirée,
LM
Salut, il me semble que CSS ne permet pas d'accéder aux éléments ascendants(parents) d'un autre. A ma connaissance en tout cas.
Impossible à faire en pur CSS(changer une propriété d'un élément différent) comme cela.
2 possibilités en pur CSS:
_se débrouiller pour que le lien et le div soient dans le même élément. Il suffit donc de rajouter une pseudo classe hover au survol et d'y changer l'image de fond. Pour la zone cliquable en forme de bouton(mieux d'utiliser un lien dans ce cas) il faudra jouer sur les marges et éventuellement un masque pour rendre non cliquable le reste(et déilimiter la zone à survoler).
_ajouter l'image dans le bouton(ou encore mieux une balise A qui à moins de décoration de base) en image de fond et changer celle là. Par contre le bouton recouvra le div (et le masquera) parce que sinon le bouton devient plus cliquable.
_Sinon autre solution plus efficace utiliser la programmation: JavaScript.
Grâce au DOM(Document Object Model) ce langage de programmation permet d'accéder à n'importe quel élément de la page et éventuellement changer ses propriétés(HTML, CSS etc...).
_4ème possibilité : ne pas faire un changement d'image au survol d'un autre élément ou rendre cliquable le DIV directement pour y faire le changement d'image de fond.
Merci à vous :)
@Nekomata : je vais essayer et reviens vers vous.
Merci et bonne journée,
LM
Je viens de trouver un sélecteur pour l'élément parent.
Autant pour moi il fallait chercher ;)
Avec un exemple très proche de ce que vous voulez:
https://www.educba.com/css-parent-selector/
testé comme ceci bn journée
<article class="container"> <h1>titre</h1> <button id="bt">change fond</button> </article>
.container{
background-color:red;
}
.container #bt{
pointer-events:auto;
}
.container:hover{
background: pink;
pointer-events: none;
}
/** pas vraiment un sélecteur parent mais une astuce, le fond ne reviens à sa couleur originale que quand la souris n'est plus sur le fond(au survol) mais c'est proche de ce que vous voulez. */
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionSuper... merci :)
Par contre, avec ces css :
.container{
background-color:red;
opacity: 0.5;
}
.container #bt{
pointer-events:auto;
}
.container:hover{
opacity: 1;
pointer-events: none;
}
l'opacité s'applique à tout le container et pas seulement au bouton :(
Mais on y est presque... Génial.
Merci beaucoup.
Sinon, il y a cette méthode :
.animClass
{
backface-visibility: hidden;
margin-right: 0px;
right: 0px;
position: relative;
top: 0px;
left: auto;
bottom: auto;
float: right;
margin-top: 0px;
}
#opak
{
padding: 0;
height: auto;
bottom: auto;
left: 0px;
margin-bottom: auto;
margin-left: 0px;
top: 0px;
position: absolute;
width: 1000px;
height: 50px;
;
margin-top: 20px;
background-color: yellow;
-webkit-transition: -moz-transform .3s ease-out;
-moz-transition: -webkit-transform .3s ease-out;
-o-transition: -o-transform .3s ease-out;
transition: transform .3s ease-out;
opacity: 0.5;
z-index: -1;
}
.niveau1:hover + .niveau2
{
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
transform: scale(2.5);
opacity: 1;
}
<div id="header"> <div class="niveau1"> <p class="animClass"> <div id="texte"> <h1> TITRE </h1> <div id="button"> <div class="button"> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-success">Success</button> </div> <div class="img"></div> </div> </div> </div> <!-- #logo --> <div id="opak" class="niveau2"></div>
Mais l'opacité ne change pas (la taille si) et je n'arrive pas à dissocier les boutons (il faut que l'effet n'ai lieu que sur un bouton :/
Les deux méthodes me semblent efficaces :)
Bonsoir,
J'ai changé mes CSS mais rien ne change :(
#opak
{
padding: 0;
height: auto;
bottom: auto;
left: 0px;
margin-bottom: auto;
margin-left: 0px;
top: 0px;
position: absolute;
width: 1000px;
height: 50px;
;
margin-top: 20px;
background-color: yellow;
opacity: 0.3;
-webkit-transition: all 0,3s ease;
-moz-transition: all 0,3s ease;
-o-transition: all 0,3s ease;
-ms-transition: all 0,3s ease;
transition: all 0,3s ease;
}
.niveau1:hover + .niveau2
{
opacity: 1;
}
Merci pour votre aide.
LM
Bonjour Nekomata,
En partant de ton code, je suis arrivé à ceci :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style>
.container
{
background-color:#00000033;
min-with: 100%;
min-height: 100%;
}
.container #bt
{
pointer-events:auto;
}
.container:hover
{
background: none;
pointer-events: none;
}
body
{
min-with: 100%;
min-height: 100%;
background-image:url("https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg");
}
</style>
</head>
<body>
<div class="container">
<h1>titre</h1>
<button id="bt">change fond</button>
</div>
</body>
</html>
Mais je n'arrive pas à avoir un container fullscreen et le hover est sensible dans la zone grise :(
Mais on peut se passer de l'opacité ;)
Sais-tu comment arranger ce code ?
Bonne journée,
LM
Salut, le soucis c'est que c'est une astuce et qui a ses limites.
Le bouton ne peut pas accéder à son élément parent.
D'ou l'intérêt d'utiliser de la programmation qui est nettement plus efficace et commence où CSS atteint ses limites.
<html>
<head>
<style type="text/css" rel="styleheet">
.inactif{ background-color:#003;
min-with: 100%;
min-height: 100%;
}
.actif{ background-color:#0f0;
min-with: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<div id="container" class="inactif">
blablablabla
<button type="buton" mouseover="changeBG()" mouseout="restoreBG()" >un bouton</button>
</div>
<script>//-- entre les balises SCRIPT le JavaScript:
function changeBG(){/** crée une fonction nommé changeBG */
/** document.getElementById('container') renvoi l'élément qui a "container" pour id
* .className="actif" régle l'attribut class à la valeur "actif"
*/
document.getElementById('container').className="actif";
}//-- fin, de la fonction changeBG
function restoreBG(){/** même chose mais pour lorsque la souris sort du survol du bouton, il faut faire revenir la couleur(image) de fond */
document.getElementById('container').className="inactif";
}
/**
il ne reste plus qu'à indiquer les fonction dans les attributs mouseover(survol) et mouseou(la souris sort du survol) ou mieux en utilisant addEventListener dans la suite du script.
*/
</script>
</body></html>
.Sans les commentaires cela ne prends pas long à écrire et offre nettement plus de possibilités.
il ne reste plus qu'à indiquer les fonction dans les attributs mouseover(survol) et mouseou(la souris sort du survol) ou mieux en utilisant addEventListener dans la suite du script.
Je suis NUL en js :( Je n'y comprends RIEN, j'ai pourtant essayé mais la logique m'échappe.
Au cas où, je te donne le lien de la page :
l'opacité doit être de 1 lorsqu'on survole le btn Success uniquement.
Can you help me please ;)
Merci d'avance ;)