Demande pour Rollover à distance en CSS et HTML

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:

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.

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 :mrgreen:

Bonjour,

Citation:

Envoyé par Muchos

Mais c'est typiquement le rôle du JS :mrgreen:

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:

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>

Merci tout le monde!!