0
عضویت / ورود
جمعه، 14 دی 1403 ( جهش تولید با مشارکت مردم )

مشکل hover در html

 
llgoli
llgoli
کاربر تازه وارد
تاریخ عضویت : شهریور 1391 
تعداد پست ها : 6
محل سکونت : تهران

مشکل hover در html

سلام دوستان

کد زیر رو ببینین :

 

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 اون تغییر میکنه مشکل کار کجاست ؟

ممنون
چهارشنبه 22 شهریور 1391  1:31 PM
تشکرات از این پست
sahel_007
sahel_007
کاربر نقره ای
تاریخ عضویت : شهریور 1388 
تعداد پست ها : 353
محل سکونت : ایران زمین

پاسخ به:مشکل hover در html

<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:400px;
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.background="rgba(0, 0, 0, 0.6)";
div.style.width = '260px';
}
else
{
div.style.background="rgba(240, 50, 80, 0.6)";
div.style.width = '400px';
background: rgba(240, 50, 80, 0.6);
}
}
</script>
</head>
<body>
<div class="sideelement" id="me">
<div onclick="dothat();">
click me
</div>
</div>
</body>
</html>

 

ببینید این کار میکنه اگه منظورتون درست فهمیده باشم
جمعه 24 شهریور 1391  12:24 PM
تشکرات از این پست
ravabet_rasekhoon hosseinb68 manijehmohamadi
دسترسی سریع به انجمن ها