[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.

[css] hover opacity

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

Vue hybride

Discussions similaires

Partager

Partager