Demande pour Rollover à distance en CSS et HTML

**siegekhol** · 02/10/2014, 10h57

Bonjour, (Je suis ultra Débutant en codage)

Après être passer par le forum java-script et n'ayant pas trouver de solutions (pas trop compris..), en ayant chercher sur google, j'ai trouvé un morceau de solution mais pas tout à fait ce que je voulais.

Je voudrais un code pour un rollover à distance en CSS pour faire exactement le système en .gif ci-dessous.

c'est à dire lorsque je met ma souris sur une ligne de texte, l'image d'en face change en fonction de la ligne ou je me trouve.

http://www.weebly.com/editor/uploads...?1412239893019

Pour le moment j'ai trouvé ça, ça fonctionne sur mon site mais c'est pas ce que je veux^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<style>
a.rollover {
background:url('http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asyn.jpg?1412238062060') no-repeat;
width: 432px;
height: 511px;
display:block;
}
a.rollover:hover {
background:url('http://www.weebly.com/editor/uploads/3/2/2/9/32293423/custom_themes/659678222391223599/files/asynchrone.gif?1412237738955')no-repeat;
}
</style><html>
<a title="Mécanisme" href="#" class="rollover"></a></html>

Je vous remercie par avance pour les solutions données.

**Muchos** · 02/10/2014, 14h45

Modifier un élément depuis d'un autre, ça ne se fait pas (encore?) en CSS.

Mais c'est typiquement le rôle du JS

**NoSmoking** · 02/10/2014, 19h52

Bonjour,

Envoyé par Muchos

Mais c'est typiquement le rôle du JS

dans le cas présent il ne s'agit pas de modifier un élément mais d'en faire apparaitre un sur le :hover.

Pour peu que cet élément soit enfant de celui que l'on survol, le CSS est très largement suffisant, si ce n'est pas le cas il suffit de déplacer l'élément.
Dans l'exemple qui nous est montré cela correspond bien à cela.

Il suffit de mettre dans une DIV, que l'on place en position:relative afin qu'elle soit référant pour ses enfants, les éléments à afficher qui eux seront en position:absolute.

Concernant le :hover, il suffit de mettre l'élément à afficher dans celui qui sera survolé. Pas sûr que cela soit clair pour tout le monde

Un exemple valant plus qu'un long discours, je vous mets un exemple que j'avais déjà fourni sur ce forum (me semble t-il), à peu de chose prêt...cela devrait convenir.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="Author" content="NoSmoking">
<title>CSS hover</title>
<style type="text/css">
html, body {
  font: 1em/1.2 Verdana,Arial,sans-serif;
  height:100%;
  margin:0;
  padding:0;
  background:#DCE3E6;
}
#page {
  width:50em;
  height:100%;
  margin:auto;
  background-color:#FFF;
}
.header {
  padding:0.5em;
  background:#ABC;
  border:1px solid #FFF;
}
.header h1{
  margin:0.25em;
  color:#069;
  text-shadow:1px 1px 0 #fff;
}
#section {
  position:relative;
  width:40em;
  margin: 2em auto;
  padding:5px;
}
#section a {
  display:inline-block;
  width:10em;
  padding:0.5em;
  text-decoration:none;
  border-left:2px solid transparent;
}
#section img {
  position:absolute;
  top:0;
  right:0;
  border:0;
  padding:10px;
}
#liste li {
  list-style:none;
}
#liste li a:hover {
  background:#F0F0F0;
  border-left:2px solid #2371aa;
}
#liste img {
  display:none;
}
#liste a:hover img {
  display:block;
}
</style>
</head>
<body>
<div id="page">
  <div class="header">
    <h1>:hover sur Developpez...</h1>
  </div>
  <div id="section">
    <img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_livres_web.gif" alt="">
    <ul id="liste">
      <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_livres_css.gif" alt="">Livres CSS</a></li>
      <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/CSS/logo_outils_css.gif" alt="">Outils CSS</a></li>
      <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_livres_xhtml.gif" alt="">Livres (X)HTML</a></li>
      <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/XHTML/logo_outils_xhtml.gif" alt="">Outils (X)HTML</a></li>
      <li><a href="#"><img src="http://club.developpez.com/webdesign/Rubriques/Web/JavaScript/logo_livres_js.gif" alt="">Livres JavaScript</a></li>
    </ul>
  </div>
</div>
</body>
</html>

**siegekhol** · 03/10/2014, 08h26

Merci tout le monde!!

Demande pour Rollover à distance en CSS et HTML

CSS

Vue hybride

Discussions similaires

Partager

Partager