Changement d'un background-image en passant sur des liens

**sebiv** · 27/02/2014, 17h16

Bonjour

mon problème semble tout bête.. et pourtant je me suis paumé..

imaginez en fait une cellule d'un tableau qui à une image background..

Ce que je souhaite faire, c'est que lorsque que l'on passe sur 4 liens différents en dehors de ce tableau, le background image change (4 liens.. 4 images différents de fond.. )

Et que l'image reste jusqu'à ce qu'un autre lien ne soit survolé (pas cliqué)

Merci de m'aiguiller..

SebIV

**Bovino** · 27/02/2014, 17h25

A moins d'une structure HTML très spécifique qui permettrait de combiner tes liens au survol avec ta cellule pour obtenir le sélecteur adapté (ce qui est loin d'être gagné), la solution optimale passera plutôt par JavaScript.

**sebiv** · 27/02/2014, 17h27

Mince... c'est ce que je cragnais un peu...

QQ un a une idée ou une piste ?

**NoSmoking** · 27/02/2014, 18h31

Bonjour,
la structure ne sera peut être pas plus compliquée que cela et en utilisant le sélecteur d'adjacence "élargie" ~ (tilde) on peut y arriver.
exemple pour test

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>sélecteur d'adjacence "élargie"</title>
<style>
td{
  width:5em;
}
#a1:hover ~ table tr #cible{
  background:red;
}
#a2:hover ~ table tr #cible{
  background:green;
}
#a3:hover ~ table tr #cible{
  background:blue;
}
 
</style>
</head>
<body>
<div>
<a id="a1" href="#1">Rouge</a>
<a id="a2" href="#2">Vert</a>
<a id="a3" href="#3">Bleu</a>
<table>
  <tr>
    <td>cellule #1</td>
    <td id="cible">cible</td>
    <td>cellule #2</td>
  </tr>
</table>
</div>
</body>
</html>

**sebiv** · 27/02/2014, 19h32

intéressant comme piste ! Merci

avec les photos ça s’intègre parfaitement

le seul point qui manque actuellement, ce sera de forcer laisser le background sur lequel on est passé (même si on y est plus) tant que l'on n'est pas passé sur un autre lien

**NoSmoking** · 27/02/2014, 21h59

le seul point qui manque actuellement, ce sera de forcer laisser le background sur lequel on est passé

dans ce cas effectivement retour à la case Bovino

la solution optimale passera plutôt par JavaScript.

Changement d'un background-image en passant sur des liens

CSS

Discussions similaires

Partager

Partager