[css] hover opacity

**qmulonainbus** · 21/09/2006, 22h33

bonsoir !
la réponse doit être très simple mais j'avoue que là je trouve pas

simple, j'ai un bouton (img) qui se voit attribuer un hover, au repos, elle a une opacité de 10, et en survol normalement je voudrais 100 hors donc je n'ai pas l'effet escompté

cela doit être la fatigue ...

Code :

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
<html>
<body>
 
 
 
<style>
.FLVplayer 
  {
  width: 384px;
  height: 288px;
  display: none;
  text-align: center;
  border: 0px red;
  text-decoration: none;
  position:absolute;
  top:0px;
  left:0px;
  margin:0px 0px;
  z-index: 45;
 }
 
 
.video
  {
  background-image: url(th008.gif);
  position:absolute;
  background-repeat: no-repeat;
  top:8px;
  left:500px;
  width: 38px;
  height: 38px;
  padding: 0;
  z-index:60;
  opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1
  }
 
 .video:hover
  {
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1
  }
 
 .video:active
  {
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1
  }
 
 
 
</style>
 
<div class="video" onclick="showDiv();">
</div>
 
<div class="FLVplayer" id="monid">
<object type="application/x-shockwave-flash" width="384" height="288" 
     wmode="transparent" data="flvplayer.swf?file=alice.FLV">
	<param name="movie" value="flvplayer.swf?file=alice.FLV" />
	<param name="wmode" value="transparent" />
</object>
</div>
 
 
<script language="javascript">
function showDiv(){
   document.getElementById('monid').style.display = (document.getElementById('monid').style.display == '')?"block":"";
}
</script>
 
</body>
</html>

merci d'avance ^^

**Bisûnûrs** · 22/09/2006, 09h15

C'est normal si tu es avec IE, il ne gère la propriété hover que pour les liens et non les div.

**qmulonainbus** · 22/09/2006, 11h06

Merci pour l'éclairage

j'ai certe IE6
mais je bosses surtout avec FFox
c'est sous firefox que ça ne fonctionne pas

**Bisûnûrs** · 22/09/2006, 11h19

Tu peux passer par du javascript :

Code :

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

1
2
<div class="video" id="monid" onclick="showDiv();" onmouseover="opac()" onmouseout="opac()">
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript">
function opac(){
   if(document.getElementById("monid").style.filter == "alpha(opacity=100)"){
      document.getElementById("monid").style.filter = "alpha(opacity=10)";
      document.getElementById("monid").style.MozOpacity = "0.1";
      document.getElementById("monid").style.KhtmlOpacity = "0.1";
   }
   else{
      document.getElementById("monid").style.filter = "alpha(opacity=100)";
      document.getElementById("monid").style.MozOpacity = "1";
      document.getElementById("monid").style.KhtmlOpacity = "1";
   }
}
</script>

**qmulonainbus** · 22/09/2006, 11h40

merci ça marche quasiment
je recontre les pb suivants :
-le bouton est à opacité 100jusquau premier passage de la souris, alors que j'aimerais qu'il soit dès le début à 10.
-et plus grave, les propriétés javascript qu'il y avait avant introduction du code ne fonctionnent plus...

help

**Bisûnûrs** · 22/09/2006, 11h46

Si tu as ton code

Code :

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

1
2
3
4
.video
  {
  opacity:0.1; filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity:0.1
  }

Je vois pas où est le problème ..

Vérifie bien que ton id est le bon si tu l'as modifié, ne jamais recopier un code bêtement.

**qmulonainbus** · 22/09/2006, 11h54

oups désolé erreur de ma part
j'avais pas la bonne version de mon fichier

Code :

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

1
2
3
4
.video
  {
  opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1
  }

par contre je n'ai pas changer l'iD, bizarre
je vérifie bien et je te tien au courant

**Bisûnûrs** · 22/09/2006, 12h05

Au passage, je viens de vérifier ton autre topic dans le forum Javascript, tu as bien recopié "bêtement" mon code.

Dans ce cas, tu as deux éléments div avec le même id : monid.

Renomme un des deux id en n'oubliant pas de changer "monid" aussi dans le javascript correspondant à la fonction appelée.

**qmulonainbus** · 22/09/2006, 12h12

mea culpa
en appliquant le code kerod, je me suis rendu compte que il y avait 2 fois le même ID, 2s après je regarde voir si j'ai une réponse (dans le négatif ct prévu de changer ^^ )
donc merci

old <du côté de l'opacité tout fonctionne impec>

*MAJ*
j'ai parlé trop vite, l'opacité marche si on ne met rien en marche, si on a déjà cliquer sur la bouton, lopacité est toute perdue, elle se met à 0.1 quand on passe dessus et à 100 le reste du temps

bon ce n'est que avec le nouveau bout de code de kerod que ça plantouille
donc je vais pas occuper 2 post pour celà

(rendez-vous rubrique javascript)

[css] hover opacity

Survol d'un élément en CSS (:hover)

Discussions similaires

Partager

Partager