مشکل hover در html
چهارشنبه 22 شهریور 1391 1:31 PM
سلام دوستان
کد زیر رو ببینین :
|
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
|
<html><head><style>.sideelement{ position:fixed; width:260px; height:80px; background: rgba(0, 0, 0, 0.6); text-align: center; vertical-align: middle; line-height: 20px; vertical-align:text-bottom; text-decoration: none; font-family: Tahoma, Arial, sans-serif; font-weight: normal; color: #f3f3f3; text-shadow: 4px 4px 4px rgba(0,0,0,.6); transition: width .5s, opacity .5s , background-color .5s; -moz-transition: width .5s, opacity .5s , background-color .5s; -webkit-transition: width .5s, opacity .5s , background-color .5s; -o-transition: width .5s, opacity .5s , background-color .5s; } .sideelement:hover{ width:280px; cursor:pointer; background: rgba(240, 50, 80, 0.6);}</style><script language="javascript">function dothat(){ var div = document.getElementById('me'); if(div.style.width == '400px') { div.style.width = '260px'; } else { div.style.width = '400px'; }}</script></head><body><div class="sideelement" id="me"> </div><div onclick="dothat();"> click me</div></body></html> |
اگه این کدو اجرا کنید یه box میبینید که وقی موسو روش میبریم خاصیت width رنگی زمینه و opacity اون زیاد میشه (برای بار اول ) اما وقتی روی click me دوبار کلیک میکنیم تا box به حالت اول برگرده وقتی موسو روی box میبریم خاصیت width اون تغییر نمیکنه در صورتی که رنگ زمینه و opacity اون تغییر میکنه مشکل کار کجاست ؟
ممنون
