Antworten auf deine Fragen:
Neues Thema erstellen

CSS Hover - kurze Hilfe

Foos

Member

Hallo,

irgendwie hab ich grad nen Blackout.

Ich hab per CSS nen Hover festgelegt.

HTML:
#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:

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

Dankeschön für die Hilfe
 

FreddyX2

Aktives Mitglied

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:
Code:
<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.

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

Foos

Member

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

Mod | Web

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.
HTML:
<a id="bild" href="eine-adresse.de"></a>
Code:
#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

Noch nicht viel geschrieben

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

Member

AW: CSS Hover - kurze Hilfe

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

Code:
#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);

}

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

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

vincitore

Aktives Mitglied

AW: CSS Hover - kurze Hilfe

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

Code:
#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);

}

Code:
<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

Member

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 &nbsp;
Geht das irgendwie weg? textindent oder so?

EDIT:

Komischerweise ist es jetzt weg :)

DANKE für die hilfe
 
Zuletzt bearbeitet:

Foos

Member

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

Aktives Mitglied

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

Mod | Web

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:
<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>
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben