zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Hoover effekt funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.03.2013, 21:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2013
Beiträge: 4
joni8a befindet sich auf einem aufstrebenden Ast
Standard 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>
Der CSS code sieht wie folgt aus:
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;
}
Das problem: Der hoover effekt funktioniert nur für einen knopf. Wenn ich nun aber einen knopf(Knopf A9 aus dem code entferne, funktioneirt der. Wenn ich knopf a entferne und knopf B hinzufüge funktioniert dieser. Wenn ich aber knopf a und b hinzufüge, funktioniert nur knopf b.... Warum??
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.03.2013, 23:15
bel bel ist offline
Faulancer
neuer user
 
Registriert seit: 31.01.2005
Beiträge: 60
bel befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.03.2013, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.03.2013
Beiträge: 4
joni8a befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 09.03.2013, 14:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von joni8a Beitrag anzeigen
Ich komme aus der verwöhnten Ecke java/c++ da hat man einen schönen Debugger und Syntax checking
Alle modernen Browser bieten Entwicklerwerkzeuge an, mit denen man debuggen kann. Die funktionieren aber nur mit vollständigem Code, nicht mit Schnipseln. Deshalb brauchen wir immer einen Link zum Problem, siehe unsere Hinweise für Fragende.

Zitat:
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.
Das Div-Element #signup liegt über #cancel. Deshalb "funktioniert" der erste nicht. Gib den Divs Hintergrundfarben, dann siehst du, wo sie sich befinden und welche Dimensionen sie einnehmen.
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.
Mit Zitat antworten
Antwort

Stichwörter
css, hoover, html, position

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Funktionsaufruf bei onclick-Event funktioniert nicht Ulixes Javascript & Ajax 28 18.12.2011 20:59
Mouseover funktioniert nicht (externe Methode) blackhtml CSS 2 07.04.2009 17:49
Darstellung Link/Hover Effekt Indiana CSS 6 21.12.2007 19:07
hover effekt bei visited links ralle1337 CSS 3 09.10.2007 10:34
dtd und css in php funktioniert im IE nicht!!! da-lick CSS 17 09.06.2007 15:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:54 Uhr.