Problem mit CSS3 Hover-Effekt

[Silver_Bear]

Hallo,

lerne gerade PHP (noch zu HTML&CSS, Javascript) und bin irgendwie auf Menüs gekommen. :lol: Keine Ahnung wie, jedenfalls habe ich mal geguckt wie man effektreiche Menüs machen kann ohne das böse F-Wort (Also Flash)...

Hab mal nach <canvas> gegooglet, bin dann aber in CSS gekommen. Da kenne ich mich leider nicht so aus. Hier der Link: CSS3 Workshops, Tutorials und Codeschnipsel

Habe mir den Code in eine Test-CSS-Datei kopiert. So und nun weiß ich nicht mehr weiter... Habe in der HTML ein Bild eingefügt. Aber das steht dann ganz normal auf der Website! Wenn ich mit der Maus drauffahren passiert nix!

Wie gesagt, kenne mich nicht soo aus mit CSS... Könnt ihr mir helfen?
Hab das Gefühl das mir da noch ein ganzes Stück fehlt...:|

 

[devilseye]

das Problem am css3 ist dass die Browser dieses noch nicht wirklich unterstützen. Und die Editoren kennen die genaue Syntax wahrscheinlich auch noch nicht wirklich.
Ist nur ne wage vermutung.

 

[Artur]

In CSS gibt es ein Hover-Effekt. Es ist ganz einfach.

<a href="#" > <div id="nav">Link</div> </a>

Als erstes muss du bestimmen, wie dein Link (z.B div-Container) in CSS aussehen soll.

#nav {
background: url("img_1.jpg");
width: 100px;
height: 50px;
}

Als nächstes bestimmst du, was geändert werden soll, wenn dein Link überfahren wird.

#nav:hover {
background: url("img_2.jpg");
}


Wichtig! Im diesem Beispiel muss du nur mit CSS arbeiten und nicht in HTML.
Aber es gibt natürlich auch andere Möglichkeiten z.B. mit JavaScript

 

[devilseye]

wollte noch eine kleine referenz angeben welche ich für sehr gut halte

HTML5 & CSS3 Support, Web Design Tools & Support ~ FindMeByIP ~

mfg devilseye

 

[Silver_Bear]

In CSS gibt es ein Hover-Effekt. Es ist ganz einfach.

<a href="#" > <div id="nav">Link</div> </a>

Als erstes muss du bestimmen, wie dein Link (z.B div-Container) in CSS aussehen soll.

#nav {
background: url("img_1.jpg");
width: 100px;
height: 50px;
}

Als nächstes bestimmst du, was geändert werden soll, wenn dein Link überfahren wird.

#nav:hover {
background: url("img_2.jpg");
}


Wichtig! Im diesem Beispiel muss du nur mit CSS arbeiten und nicht in HTML.
Aber es gibt natürlich auch andere Möglichkeiten z.B. mit JavaScript

Hmmm... Habe das "Link" durch mein <img> ersetzt...Aber so kann das doch gar nicht funktionieren!? Hast du dir das Beispiel von mir schonmal angesehen?
Da ist ein kleiner Button, wenn man da mit der Maus drauf-"fährt" schiebt sich der Button nach rechts weg, und man sieht einen Text. Der ist quasi unter dem Button drunter... Geht man wieder weg scheibt der Button sich wieder über den Text...

@devilseye Thx, das ist ne gute Übersicht! (Auf Safari umsteigen!? Der kann nämlich alles...)