|
|||
Hoover effekt funktioniert nicht
Hallo,
ich habe ein komisches problem: Und zwar möchte ich einen hoover effekt realiseren wenn der user mit der mouse über dem knopf ist. Die HTML umgebung der knöpfe sieht so aus: Code:
<div id="cancel"><input type="button" class="buttonRedNormal" value="Cancel" onmouseover=this.className="cancelHoover" onmouseout=this.className="buttonRedNormal"></div> <br> <div id="signup"><input type="button" class="buttonBlueNormal" value="Sign up" onmouseover=this.className="signupHoover" onmouseout=this.className="buttonBlueNormal"> </div> Code:
.buttonBlueNormal { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #050505; padding: 10px 20px; background: -moz-linear-gradient( top, #0022ff 0%, #2ef1ff); background: -webkit-gradient( linear, left top, left bottom, from(#0022ff), to(#2ef1ff)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #949494; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,1); } .buttonRedNormal { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #050505; padding: 10px 20px; background: -moz-linear-gradient( top, #ff0000 0%, #750000); background: -webkit-gradient( linear, left top, left bottom, from(#ff0000), to(#750000)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #949494; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,1); } .signupHoover { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #f2f2f2; padding: 10px 20px; background: -moz-linear-gradient( top, #004cbd 0%, #000000); background: -webkit-gradient( linear, left top, left bottom, from(#004cbd), to(#000000)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #949494; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,1); } .cancelHoover { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #f2f2f2; padding: 10px 20px; background: -moz-linear-gradient( top, #bd0000 0%, #170000); background: -webkit-gradient( linear, left top, left bottom, from(#bd0000), to(#170000)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #949494; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.2), 0px 1px 0px rgba(255,255,255,1); } #signup { position: relative; right: 108px; bottom: 60px; } #cancel { position: relative; left: 108px; bottom: 0px; } |
Sponsored Links |
|
|||
Puh, also da gibt es einiges anzumerken, aber das wichtigste zu erst:
1. für so einen Hover-Effekt (mit einem o) brauchst du eigentlich überhaupt kein JavaScript Das geht mit CSS mit :hover Aber für die Vollständigkeit hier zu deiner eigentlichen Frage: 1. Achte auf vollständiges und korrektes HTML. Elemente richtig schließen, Anführungszeichen an die richtige Stelle setzen. 2. Wenn ich dein Beispiel (etwas bereinigt) ausprobiere, funktionierts: JS Bin - Collaborative JavaScript Debugging Falls du es noch nicht kennst: Little Boxes ist super zum Lernen von CSS. |
Sponsored Links |
|
|||
Hallo, erstmal danke für deine Mühe. Ich komme aus der verwöhnten Ecke java/c++ da hat man einen schönen Debugger und Syntax checking Das scheint mir beim webdevelopment alles ein bischen aufwändiger zu sein Es wäre nett wenn du mir sagen könntest was du bereinigt hast. Denn bei mir funktioniert das Beispiel nur wenn die Knöpfe nicht direkt auf einer Linie sind, sondern nur wenn sie schräg versetzt sind...könnte es auch am Browser liegen? Ich benutze Firefox unter ubuntu.
|
|
|||
Zitat:
Zitat:
Verschiebung mit relativer Positionierung ist ungeeignet für die Anordnung im Layout. Wenn du Elemente nebeneinander setzen willst, dann gibt es z.B. die float-Eigenschaft. Und wie oben bereits steht: Du brauchst kein JavaScript für einen simplen Hover-Effekt. Das geht mit der Pseudoklasse :hover. Bitte glaub es: Du kannst CSS nicht erraten. Bitte widme dich der bereits empfohlenen Grundlagen-Lektüre.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Stichwörter |
css, hoover, html, position |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Funktionsaufruf bei onclick-Event funktioniert nicht | Ulixes | Javascript & Ajax | 28 | 18.12.2011 21:59 |
Mouseover funktioniert nicht (externe Methode) | blackhtml | CSS | 2 | 07.04.2009 18:49 |
Darstellung Link/Hover Effekt | Indiana | CSS | 6 | 21.12.2007 20:07 |
hover effekt bei visited links | ralle1337 | CSS | 3 | 09.10.2007 11:34 |
dtd und css in php funktioniert im IE nicht!!! | da-lick | CSS | 17 | 09.06.2007 16:44 |