CSS Hover - kurze Hilfe

[Foos]

Hallo,

irgendwie hab ich grad nen Blackout.

Ich hab per CSS nen Hover festgelegt.

#bild {

    position: absolute;
    background-image: url(../images/start.png);
    width: 846px;
    height: 353px;
    
    }
#bild a:hover {

    position: absolute;
    background-image: url(../images/starthover.png);
    width: 846px;
    height: 353px;
    
    }

So und jetzt will ich auf meiner Seite das da praktisch der Container ist und der ist ja ohne INhalt. Wie bekomm da jetzt einen Hover hin, wenn man mit der Maus über den Container kommt, ohne das er Inhalt hat?

Mein HTML-Code sieht bis jetzt so aus:

<div id="bild"> </div>

Dankeschön für die Hilfe

 

[FreddyX2]

AW: CSS Hover - kurze Hilfe

Ich weiß zwar nicht, was Du jetzt eigentlich genau machen möchtest, aber wenn Du a:hover angibst, brauchst Du im HTML entsprechend einen Link.
Du hast jetzt ja gesagt, dass ein anderes Bild geladen wird, wenn über dem Link die Maus ist. Ohne Link, keine Änderung.


xHTML sollte so aussehen:

<div id="bild">
<a href="http://www.psd-tutorials.de/" />
</div>

Edit: wirklich sicher bin ich mir dabei aber gerade auch nicht... Ich teste das mal bei mir.

Edit2:
Also, das mit dem Hover geht nur, wenn die Maus wirklich über einem Link ist. Also müsstest Du in der HTML-Datei eine Transparente Grafik einblenden lassen, damit dann via CSS die Hintergründe geändert werden. Sonst rallt der Browser nicht, dass er eigentlich einen Link hat.

<div id="bild">
<a href="http://www.psd-turorials.de/"><img src="../images/transparent.png" alt="hier sollte niemand etwas sehen..." /></a>
</div>

 

[sokie]

AW: CSS Hover - kurze Hilfe

es muss nicht #bild a:hover, sondern #bild:hover heissen.

 

[FreddyX2]

AW: CSS Hover - kurze Hilfe

es muss nicht #bild a:hover, sondern #bild:hover heissen.

Recht hat der Mann!

PS
Den Wald kann man nicht sehen! Es stehen zuviele Bäume davor.. Dann vergess ganz schnell den Kram, den ich da oben getextet hab x)

 

[Foos]

AW: CSS Hover - kurze Hilfe

Ja genauuuuu! Das war es!

Aber was komischerweise noch nicht funktioniert ist mein Link. Also praktisch ein Link ohne das Innhalt in dem Div Container ist....

ABer soweit schon mein recht herzlichen Danke!

 

[sokie]

AW: CSS Hover - kurze Hilfe

dein "Link" funktioniert nicht, weil es keinen "Link" gibt.
wenn du einen Link willst, kannst du eigentlich auf die Div box verzichten.

<a id="bild" href="eine-adresse.de"></a>

#bild {
    position: absolute;
    [COLOR=Red][B]display: block;[/B][/COLOR]
    background-image: url(../images/start.png);
    width: 846px;
    height: 353px;
    }
#bild:hover{
    background: url(../images/hoverbild.png);
}

 

[andrepape]

AW: CSS Hover - kurze Hilfe

danke auch von mir.....aus versehen im falschen forum reingeschaut und die antwort auf meine frage hier gefunden.... lach... das ist das leben..

danke euch..

gruss andre

 

[Foos]

AW: CSS Hover - kurze Hilfe

Kann mir jemand nochmal erklären, warum folgender Hover nicht funktioniert?

#mehr {
position : fixed;
display: block;
top : 350px;
left : -3px;
height: 100px;
width: 100px;
}
#mehr a {
background-image: url(../images/mehr.png);
height: 100px;
width: 100px;
}
#mehr a:hover {
    background-image: url(../images/mehr_hover.png);

}

<div id="mehr">
<a href="#" ></a>
</div>

Im HTML wird nichts angezeigt bei mir? Ich check meinen Fehler gerade nicht!

 

[vincitore]

AW: CSS Hover - kurze Hilfe

Kann mir jemand nochmal erklären, warum folgender Hover nicht funktioniert?

#mehr {
position : fixed;
display: block;
top : 350px;
left : -3px;
height: 100px;
width: 100px;
}
#mehr a {
background-image: url(../images/mehr.png);
height: 100px;
width: 100px;
}
#mehr a:hover {
    background-image: url(../images/mehr_hover.png);

}

<div id="mehr">
<a href="#" ></a>
</div>

Im HTML wird nichts angezeigt bei mir? Ich check meinen Fehler gerade nicht!

haste mal versucht in den a tag nen text reinzupacken ? bzw nen nbsp? bzw wahrscheinlich reicht auch schon -> display: block;

 

[Foos]

AW: CSS Hover - kurze Hilfe

Also mit nbsp und display:block funktioniert es - allerdings hab ich dann in meinem container ein : "-" drin. Kommt wahrscheinlich vom  
Geht das irgendwie weg? textindent oder so?

EDIT:

Komischerweise ist es jetzt weg

DANKE für die hilfe

 

[Foos]

AW: CSS Hover - kurze Hilfe

SORRY

ich bräuchte erneut eure Hilfe:

Kann ich mehreren Bildern das gleiche Hover Bild zuordnen?

also angenommen in meinem Container sind alle eingefügten Bilder im CSS durch "container img" festegelegt und per HTML eingefügt durch <img src> Kann ich ihm jetzt praktisch im CSS sagen, dass er bei allen "img" das gleiche hover Bild nimmt?

Mit img:hover will es nicht so Recht funktionieren....

 

[vincitore]

AW: CSS Hover - kurze Hilfe

ja einfach die einzelnen css tags zusammen machen also

img1, img2 {
background-image: url(bild.jpg);}
bzw halt
img1:hover, img2:hover usw

 

[sokie]

AW: CSS Hover - kurze Hilfe

SORRY

ich bräuchte erneut eure Hilfe:

Kann ich mehreren Bildern das gleiche Hover Bild zuordnen?

also angenommen in meinem Container sind alle eingefügten Bilder im CSS durch "container img" festegelegt und per HTML eingefügt durch <img src> Kann ich ihm jetzt praktisch im CSS sagen, dass er bei allen "img" das gleiche hover Bild nimmt?

Mit img:hover will es nicht so Recht funktionieren....

nein, kannst du nicht. jedenfalls nicht per css.
das html tag <img /> ist ein Inhalt. CSS ist nicht für die Inhalte zuständig.
Per CSS kannst du nur Hintergünde beeinflussen und das Aussehen der Inhalte - nicht die Inhalte selbst.

eine Möglichkeit für die Anzeige eines Hintergrundbildes statt des Bildes könnte so aussehen:

<html>
<head>
<style type="text/css">
.wechsler{
  width: 70px;
  height: 40px;
  background: url(hoverfake.png) top left no-repeat;
}
.wechsler img:hover{
  visibility:hidden;
}
</style>

</head>

<body>
<div class="wechsler"><!-- fuktioniert nicht im IE<=6! -->
  <img src="bild.jpg" />
</div>
</body>
</html>