mam malutki problem ....
otóż probowalem sobie zrobić na stronie menu, w którym po najechaniu myszą zmienia się kolor.
I oczywiście takie coś zrobiłęm bo to nie problem:
Kod
function changeColorMenu(id, show){
var menu = document.getElementById("m"+id);
if(show == 1){
menu.style.backgroundColor = "#0c1125";
}
else{
menu.style.backgroundColor = "#f7f7f7";
}
}
var menu = document.getElementById("m"+id);
if(show == 1){
menu.style.backgroundColor = "#0c1125";
}
else{
menu.style.backgroundColor = "#f7f7f7";
}
}
menu w htmlu wygląda tak:
Kod
echo '
<div id="m0" class="menuPosition" onmouseover="changeColorMenu(0, 1)" onmouseout="changeColorMenu(0, 0)">
<h1>
menu 1
</h1>
</div>
<div id="m1" class="menuPosition" onmouseover="changeColorMenu(1, 1)" onmouseout="changeColorMenu(1, 0)">
<h1>
menu 2
</h1>
</div>
<div id="m2" class="menuPosition" onmouseover="changeColorMenu(2, 1)" onmouseout="changeColorMenu(2, 0)">
<h1>
menu 3
</h1>
</div>
<div id="m0" class="menuPosition" onmouseover="changeColorMenu(0, 1)" onmouseout="changeColorMenu(0, 0)">
<h1>
menu 1
</h1>
</div>
<div id="m1" class="menuPosition" onmouseover="changeColorMenu(1, 1)" onmouseout="changeColorMenu(1, 0)">
<h1>
menu 2
</h1>
</div>
<div id="m2" class="menuPosition" onmouseover="changeColorMenu(2, 1)" onmouseout="changeColorMenu(2, 0)">
<h1>
menu 3
</h1>
</div>
z tymże szybko takie menu mi się znudziło bo jak zauważyłem jest "zbyt proste" i wpadłem na pomysł by po najechaniu myszy kolor był stopniowo nadawany (czyli od koloru: #f7f7f7 do koloru #0c1125 przechodziło by w ciągu około sekundy). No i niestety wiele prób przeprowadziłem ale niestety wszystko zakończyło się fiaskiem ....
próbowałem z setTimeout i style.filter oraz opacity .... niestety się nie udało ...
chciałem was prosić o napisanie mi jak mógłbym dokonać tego co napisałem wyżej ?
Pozdrawiam