Onmouseover + transition seulement avec CSS
Résolu
danwolf7
Messages postés
54
Date d'inscription
Statut
Membre
Dernière intervention
-
danwolf7 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
danwolf7 Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaiterai faire en sorte que lorsque ma souris survole un bouton définit, que le fond d'écran de ma page change mais cela avec une transition du genre un fondu et uniquement en utilisant du CSS.
J'ai déjà ce code qui marche :
Et comment faire pour que dans une feuille CSS ce code...
Merci d'avance !
Je souhaiterai faire en sorte que lorsque ma souris survole un bouton définit, que le fond d'écran de ma page change mais cela avec une transition du genre un fondu et uniquement en utilisant du CSS.
J'ai déjà ce code qui marche :
<img src="image.png" width="200" height="102" alt="Nom" onmouseover="body.style.backgroundImage='url(images/backgrounds/image.jpg)';"></img>Mais j'aimerai maintenant y ajouter une petite transition. Comment faire ?
Et comment faire pour que dans une feuille CSS ce code...
.truc:hover {}...agisse sur un autre objet que lui même ?
Merci d'avance !
A voir également:
- Onmouseover transition
- Transition imovie télécharger - Télécharger - TV & Vidéo
- Transition capcut - Télécharger - Montage & Édition
- Logiciel transition musique automatique ✓ - Forum Enregistrement / Traitement audio
- Télécharger transition morphose powerpoint gratuit - Forum Powerpoint
- Est-il possible de télécharger de nouveaux thèmes PowerPoint ? ✓ - Forum Powerpoint
3 réponses
Bonjour,
Ça a été ajouté dans le CSS3 mais apparemment n'a pas encore été implémenté par internet explorer. D'après un post ici : https://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions sera ajouté dans IE10.
Jetez un oeil ici : http://www.w3schools.com/css3/css3_transitions.asp
Trouverez des exemples là : https://www.the-art-of-web.com/css/timing-function/
Ça a été ajouté dans le CSS3 mais apparemment n'a pas encore été implémenté par internet explorer. D'après un post ici : https://stackoverflow.com/questions/5103283/does-internet-explorer-support-css-transitions sera ajouté dans IE10.
Jetez un oeil ici : http://www.w3schools.com/css3/css3_transitions.asp
Trouverez des exemples là : https://www.the-art-of-web.com/css/timing-function/
Bonjour,
Déjà merci, vos liens pourront m'être très utiles et pourront m'inspirer.
Mais admettons que j'ai ces codes.
Configuration: Mac OS X / Firefox 14.0.1
Déjà merci, vos liens pourront m'être très utiles et pourront m'inspirer.
Mais admettons que j'ai ces codes.
.body {
transition...
}
.div {}
.div:hover {
...
}Comment faire pour que le "truc" étant survolé affecte un autre objet ? Comme par exemple un le fond d'écran étant contenu dans body ?
Configuration: Mac OS X / Firefox 14.0.1
Hm, je ne pense pas qu'on puisse modifier le body à partir d'un de ses enfants en CSS. Vous pouvez affecter ce qu'il y a "en dessous" mais pas ce qu'il y a "au dessus".
Par exemple :
L'inverse n'est 'probablement' pas possible (modifier test en passant par un hover sur x), utilisez du javascript.
Par exemple :
<html>
<head>
<style type="text/css">
.x{display:none;color:#FF0000;background-color:#FFF;}
.test{background-color:#00FF00;}
.test:hover .x{display:inline;background-color:#000;}
</style>
</head>
<body>
<div class="test">
hover
<div class="x">
hello
</div>
</div>
</body>
</html>
L'inverse n'est 'probablement' pas possible (modifier test en passant par un hover sur x), utilisez du javascript.
D'accord, merci beaucoup en tout cas.
Et ne connaissant pour ainsi dire rien au javascript, serait-il possible que vous me montriez comment faire en js ?
J'ai déjà un peu parcouru le net à ce sujet, mais les codes sont trop compliqués pour moi et je n'ai pas assez de connaissance dedans pour les simplifier et les appliquer chez moi.
Et ne connaissant pour ainsi dire rien au javascript, serait-il possible que vous me montriez comment faire en js ?
J'ai déjà un peu parcouru le net à ce sujet, mais les codes sont trop compliqués pour moi et je n'ai pas assez de connaissance dedans pour les simplifier et les appliquer chez moi.
Après quelques recherches et pas mal de test (vu que je suis autant une teub que vous en javascript ahahah) voici une solution qui permet de modifier la class donc CSS du body, là ça change entre bd1 et bd2 s'applique au body avec mouseover et mouseout, à vous de remplacer/modifier ces class pour faire des css transitions:
<html>
<head>
<script type="text/javascript">
function modifbody1(){
document.body.className="bd2";
}
function modifbody2(){
document.body.className="bd1";
}
</script>
<style type="text/css">
.bd1{background-color:#FFF;}
.bd2{background-color:#000;}
.test{color:#FF0000;}
</style>
</head>
<body class="bd1">
<span class="test" onmouseover="modifbody1()" onmouseout="modifbody2()">
hover me!
</span>
</body>
</html>
Super ! Merci beaucoup !
Après avoir modifié deux ou trois petits trucs, ça marche nickel ! Ce que je ne réussissais pas à comprendre c'était le
Après avoir modifié deux ou trois petits trucs, ça marche nickel ! Ce que je ne réussissais pas à comprendre c'était le
document.body.className="bd2";Après avoir pas mal galéré, j'ai réussi à comprendre son fonctionnement et le remplacer par
document.getElementById("var1").id="var2";Super merci à tous, sujet résolu !
