Zmiana nazwy linku po najechaniu myszką

Oj nie można być takim zgredem i silić się na powagę za każdym razem, gdy pisze się instrukcje. A więc dzisiaj spokojnie, miło, miejmy nadzieję, że ciekawie i prosto. Przede wszystkim prosto.

Co będziemy dokładnie dzisiaj robić.

Każdy wie, jak zmieniać tło, czcionkę, odległość między literami, obramowanie dla hovera linku. Ale czy ktoś kiedyś próbował zmienić tekst? Jeśli tak, to proszę mnie tu poszczuć kotami i powiedzieć, że za późno na to wpadłam. Chociaż właściwie o tej rzeczy wiem już szmat czasu, po prostu nie starczyło czasu na instrukcję ( jakże krótką instrukcję ).

Efekcik poniżej.

Dotknij mnie!

Eja, tu jestem!

Jeszcze raz!

Zabawa, zabawą. Ale co z wykonaniem. Co trudnych nie należy. Na pewno, ale jest czasem nieco upierdliwe i niestety nie zawsze wychodzi. co jest zdecydowanie niefajne. :(

Baza do kodu wygląda tak ( umieszczamy ją tylko i wyłącznie w gadżecie HTML/JavaScript, ponieważ w gadżecie Tekst nie ruszy. ):

<a class='navi' href='http://graphical-thoughts.blogspot.com/><div style="text-align:center;"

     onmouseover="this.innerHTML = 'Eja, lżej!';"

     onmouseout="this.innerHTML = 'Dotknij mnie!';"

>

Dotknij mnie!

</div></a>

• onmouseover to efekt po najechaniu na link;
• onmouseout to efekt - powrót do normalności - podczas, gdy myszka nie "dotyka" już linku. 

Wcześniej jeszcze należy ustalić klasę linku. Ja użyłam tej, którą mam moje menu, czyli "navi". Jak zwykle - więcej na ten temat tu.
Ewentualnie krótka przypominajka tutaj.
Wchodzimy w Szablon > Dostosuj > Zaawansowane i dodajemy poniższy kod ( taki kod dodałam ja, możecie go swobodnie zmieniać, tak jak zwykłą klasę linku. )

a.navi:link, a.navi:active, a.navi:visited {display:inline-block; width:110px; background:#b4d4c1; color: #fff; text-align:center; margin-bottom:2px;text-transform:uppercase;

font-family:arial; font-size:7pt;  letter-spacing:0px;  padding:2px;

-webkit-transition-duration: .50s;-moz-transition-duration: .50s } 

a.navi:hover {background:#6e6180; color:#eee; -webkit-transition-duration: .50s;}

Tekst po onmouseover zamieniamy na tekst, który -logiczne- ma się pokazać po najechaniu na niego myszką. U mnie Eja, lżej A tekst niebieski za onmouseout na tekst po zjechaniu myszką ( Dotknij mnie! ). Następnie mamy jeszcze jeden tekst, który najlepiej, aby pokrywał się z onmouseout. ( Dotknij mnie! ) Jest to po prostu nazwa danego linku, nic więcej. 

No cóż spróbujcie sami! 

Tylko jak pisałam, nie zawsze wychodzi. Akurat w poście wyjść nie chciało i się dogadaliśmy.