Modifier une autre balise quand on passe sur une autre
Résolu/Fermé
AnneOny
Messages postés
172
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
7 novembre 2016
-
20 sept. 2013 à 18:59
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 9 mars 2014 à 00:24
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 9 mars 2014 à 00:24
A voir également:
- Modifier une autre balise quand on passe sur une autre
- Piratage facebook changer mot de passe - Guide
- Modifier une liste déroulante excel - Guide
- Comment modifier un pdf - Guide
- Modifier dns - Guide
- Mettre un mot de passe sur un dossier - Guide
3 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
22 sept. 2013 à 19:55
22 sept. 2013 à 19:55
SweetRiver
petite precision des different cas ou cela fonctionne et le code en fonction !
.thumb:hover .title (si .title est descendant de .thumb)
.thumb:hover > .title (si .title est fils de .thumb)
.thumb:hover + .title (si .title est frère directement suivant de .thumb)
.thumb:hover ~ .title (si .title est un frère suivant de .thumb)
dans les autre cas il faut passer par du js
petite precision des different cas ou cela fonctionne et le code en fonction !
.thumb:hover .title (si .title est descendant de .thumb)
.thumb:hover > .title (si .title est fils de .thumb)
.thumb:hover + .title (si .title est frère directement suivant de .thumb)
.thumb:hover ~ .title (si .title est un frère suivant de .thumb)
dans les autre cas il faut passer par du js
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
Modifié par animostab le 20/09/2013 à 21:06
Modifié par animostab le 20/09/2013 à 21:06
C'est pas très clair car tu ne dis pas ce que tu veux faire
dans le css tu peut avoir
a {propriétés css}
a:hover {propriétés css}
le code html
<a href="#">ton texte</a>
quand la souris passe sur ton texte ce sont les propriétés css de a:hover qui s'applique a ton texte.
plus d'explication ici http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php
sinon il y a le onmouseover et onmouseout qui te permet d'afficher autre chose à la place de ton texte
(ce n'est pas du CSS)
--
dans le css tu peut avoir
a {propriétés css}
a:hover {propriétés css}
le code html
<a href="#">ton texte</a>
quand la souris passe sur ton texte ce sont les propriétés css de a:hover qui s'applique a ton texte.
plus d'explication ici http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php
sinon il y a le onmouseover et onmouseout qui te permet d'afficher autre chose à la place de ton texte
(ce n'est pas du CSS)
--
AnneOny
Messages postés
172
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
7 novembre 2016
75
21 sept. 2013 à 11:10
21 sept. 2013 à 11:10
Non, ce que j'aimerais c'est quand je passe sur un texte (avec le :hover), je veux que ça agrandisse les bordures d'une image, qui n'a rien à voir avec le texte.
AnneOny
Messages postés
172
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
7 novembre 2016
75
22 sept. 2013 à 18:23
22 sept. 2013 à 18:23
Vous avez compris ?
SweetRiver
Messages postés
102
Date d'inscription
jeudi 4 août 2011
Statut
Membre
Dernière intervention
22 novembre 2016
6
Modifié par SweetRiver le 22/09/2013 à 19:32
Modifié par SweetRiver le 22/09/2013 à 19:32
Bonjour,
Oui, cela est possible.
Voici un exemple :
=> Lorsque je survole la classe thumb, alors la classe title prend une opacité de 0.8.
Attention toutefois, cela ne fonctionne que si thumb est un parent de title.
Autrement, je pense qu'il faut se tourner vers un petit code en javascript.
@+
Oui, cela est possible.
Voici un exemple :
.thumb:hover .title {
opacity: 0.8;
}
=> Lorsque je survole la classe thumb, alors la classe title prend une opacité de 0.8.
Attention toutefois, cela ne fonctionne que si thumb est un parent de title.
Autrement, je pense qu'il faut se tourner vers un petit code en javascript.
@+
AnneOny
Messages postés
172
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
7 novembre 2016
75
7 mars 2014 à 18:43
7 mars 2014 à 18:43
J'ai une dernière question après plusieurs mois: quand c'est différent (par exemple quand je mets en focus) cette technique ne marche pas. Avez-vous une solution?
Merci
Merci
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
8 mars 2014 à 07:04
8 mars 2014 à 07:04
salut tu peux faire ca en jquery
<html>
<head>
<style>
#id1 {
margin: 100px auto; /*Xpx : marge depuis le haut , auto : centré*/
width:400px;
height:400px;
border:1px solid red;
}
#id2 {
margin: 100px auto; /*Xpx : marge depuis le haut , auto : centré*/
width:400px;
height:400px;
border:1px solid blue;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$( "#id1" ).click(function() {
$( "#id2" ).css("border","4px solid blue");
});
$( "#id1" ).mouseleave(function() {
$( "#id2" ).css("border","1px solid blue");
});
})
</script>
<div id="id1">bla bla</div>
<div id="id2">bla bla bla</div>
</body>
</html>
<html>
<head>
<style>
#id1 {
margin: 100px auto; /*Xpx : marge depuis le haut , auto : centré*/
width:400px;
height:400px;
border:1px solid red;
}
#id2 {
margin: 100px auto; /*Xpx : marge depuis le haut , auto : centré*/
width:400px;
height:400px;
border:1px solid blue;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$( "#id1" ).click(function() {
$( "#id2" ).css("border","4px solid blue");
});
$( "#id1" ).mouseleave(function() {
$( "#id2" ).css("border","1px solid blue");
});
})
</script>
<div id="id1">bla bla</div>
<div id="id2">bla bla bla</div>
</body>
</html>
AnneOny
Messages postés
172
Date d'inscription
dimanche 19 mai 2013
Statut
Membre
Dernière intervention
7 novembre 2016
75
8 mars 2014 à 19:16
8 mars 2014 à 19:16
Ok merci :)
Je suppose qu'il n'y a pas de possibilité en CSS ...
Je suppose qu'il n'y a pas de possibilité en CSS ...
animostab
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
738
9 mars 2014 à 00:24
9 mars 2014 à 00:24
ben non
22 sept. 2013 à 22:43
Bonne soirée
@+
23 sept. 2013 à 18:31
Je n'ai pas bien compris...
23 sept. 2013 à 18:38
Un grand merci, c'était quelque chose que je voulais vraiment retrouver !