CSS hover

  • Themenstarter Themenstarter Blinchik
  • Beginndatum Beginndatum
B

Blinchik

Hey
ich hab ein kleines problem mit dem Hover... ich möchte wenn ich den mauszeiger auf den Button zeige,
dass sich das bild ändert und ich hab folgendes als beispiel

Code: 
<html>
<head>
<style type="text/css">
<!--

#news
{
 background-image: url(news.jpg);
 backgroung-repeat: no-repeat; 
height: 26px;
width: 200px;
}

#news a:hover 
{
   background-image: url(newson.jpg);
 backgroung-repeat: no-repeat; 
height: 26px;
width: 200px;

}


--></style
</head>
<body>

<a href="testlink.html"><div id="news"></div></a>




<body>
</html>

so und ich hab hier schon im board rumgestöbert und versucht
mit "a#news:link, a#news:visited" funktioniert alles nicht da verschwindet der button sogar... ich kriegs grad echt net hin :/
 
Hi,

der CSS-Hover wird so umgesetzt:

HTML: 
<a href="testlink.html" id="news"></a>
CSS: 
a#news
{
background: url(news.jpg) no-repeat;
height: 26px;
width: 200px;
display: block;
}

a#news:hover 
{
background: url(newson.jpg) no-repeat;
}

mfg Maik
 
hab ich eben versucht... es wird nichts mehr angezeigt mit dem code mache ich das a vor dem #news weg dann zeigt er mir wieder was
 
Dann hast du meine hinzugefügte display:block-Regel im ersten Deklarationsblock nicht übernommen, die für das Inline-Element <a> vonnöten ist, damit es die Breiten- und Höhenangabe überhaupt annimmt.

mfg Maik
 
Ah ok es funktioniert dankeschön ^_^

kann ich vll iwo genau nachlesen was es mit dem "block" und "inline" aufsich hat?
weil soganz hab ich das nocht nicht verstanden warum es nur so funktioniert
 
Ist eigentlich recht einfach, wo da der Unterschied ist.

Block-Elemente (wie z.B. <div>, <h1>-<h6>, <p>, <table>, <ul>) können die Eigenschaften des Box-Modells besitzen, also width, height, padding, margin und border. Diese Elemente zeichnen sich dadurch aus, dass sie im Textfluß automatisch einen Absatz erzeugen.

Inline-Elemente (wie z.B. <a>, <img>, <span>) hingegen können diese Eigenschaften zunächst mal nicht besitzen, und erzeugen auch keinen Absatz, sondern reihen sich im Textfluß nebeneinander an.

Sie können aber mittels diverser CSS-Eigenschaften sog. "Block-Level-Charakteristika" annehmen, dazu zählt neben display:block auch display:inline-block, sowie eine float:left- oder float:right-Deklaration.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück