Modifier une autre balise quand on passe sur une autre
Résolu
AnneOny
Messages postés
176
Date d'inscription
Statut
Membre
Dernière intervention
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Modifier une autre balise quand on passe sur une autre
- Modifier dns - Guide
- Comment modifier une story sur facebook - Guide
- Modifier une liste déroulante excel - Guide
- Trousseau mot de passe iphone - Guide
- Mot de passe - Guide
3 réponses
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
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)
--
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.
@+
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
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>
Bonne soirée
@+
Je n'ai pas bien compris...
Un grand merci, c'était quelque chose que je voulais vraiment retrouver !