Bei OnMouseOver anderen Div anzeigen

[Vert1cal]

Hi Leute,

habe ein Problem und hoffe ihr könnt helfen.

Ich habe zwei Divs

#homebutton  {
	position: absolute;
	top: 270px;
	left: 36px;
	Width: 70px;
	Height: 16px;
	background-image: url(homebutton.jpg);
}

#homeoverlay {
	
	position: absolute;
	top: 254px;
	left: 31px;
	Width: 205px;
	Height: 45px;
	background-image: url(homeOverlay.png)
}

folgender HTML Code Dazu

<a href="index.html"><div ID="homebutton"></div></a>

Wenn ich nun mit der Maus auf die Grafik des Div "homebutton" gehe, soll der Div "homeoverlay" angezeigt werden....
Ich bekomme es einfach nicht hin.

Für alle Möglichkeiten sei es JS oder nur CSS bin ich sehr dankbar.
Hab auch schon viel gegoogelt und mit JS document.getElementById probiert oder mit hover in CSS....ich bekomms einfach nicht hin.

Wäre euch super dankbar wenn ihr da ne Lösung habt.

Danke und viele Grüße,
Vert1cal

 

[Mr_Bishop]

Eine Lösung wäre:

CSS ändern:
.homebutton {....}
.homeoverlay {....}

HTML Div erweitern um:
class="homebutton" onmouseover="this.className='homeoverlay';" onmouseout="this.className='homebutton';"


=> Speedys Lösung ist deutlich besser!

 

[Speedy.]

#homebutton:hover {

}

Kein JavaScript, reines CSS. Den Rest bekommst du so über reine CSS-Regeln hin, ansonsten findet Google sicher gute Tutorials dazu.

 

[Vert1cal]

Hey, danke erstmal für eure Antworten.

Mr_Bishop, dein Lösungsansatz funktioniert einwandfrei! Danke!!!!

@Speedy. - ich hab das mit dem hover schon ausprobiert und es echt nicht hinbekommen....weiß nicht ob ich irgendwelche Eigenschaften verwendet habe, die andere überspielen oder so...auf jeden Fall hab ich es damit nicht hinbekommen...wäre dir dankbar wenn du trotzdessen ein mal zeigen könntest, wie es damit funktioniert.

 

[Daaron]

Ich habe zwei Divs

------

<a href="index.html"><div ID="homebutton"></div></a>

Also ich seh hier nur EIN <div>...

Beschreib doch mal ausführlich, was für ein Verhalten du erwartest. Soll es tatsächlich ein <div> mit nem Overlay geben, dass sichtbar wird, wenn du den Button berührst? Oder soll der Button selbst sich optisch (nicht inhaltlich) verändern?
Das erste erfordert (wahrscheinlich) JavaScript, das 2. ist mit reinem CSS ein Kinderspiel.

 

[Vert1cal]

Wenn ich den Button berühre, soll ein anderes Bild eingeblendet werden. Also er soll sich nur optisch verändern der Button.
Ich hab auch die Variante mit dem hover schon oft gelesen im Netz es aber wirklich nicht hinbekommen.

Ich wäre euch sehr dankbar, wenn mir jemand das noch mal erklären würde.

 

[Speedy.]

Das Ganze ist im Grunde sehr simpel. Der hast deinen HTML-Button:

<a href="index.html" id="button"></a>

Ich denke mal, dass das <div> nicht notwendig ist, außer du willst eine besondere Konstruktion damit bauen. Dann kommen wir zum CSS:

#button {
  position: absolute;
  display: inline-block;
  top: 270px;
  left: 36px;
  width: 70px;
  height: 16px;
  background-image: url('homebutton.jpg');
}

Der obere Abschnitt ist das Styling für den Button, wenn die Seite geladen wird. So wird der Button also immer aussehen (CSS-Properties werden übrigens immer klein geschrieben).

Anschließend fügst du eine Regel für :hover hinzu:

#button:hover {
  top: 254px;
  left: 31px;
  width: 205px;
  height: 45px;
  background-image: url('homeOverlay.png');
}

In diesem Fall passiert folgendes: sobald die Maus den Button berührt, wird der er nach oben links verschoben und breiter und höher als beim normalen Zustand. Zudem ändert sich das Hintergrundbild.

Das position: absolute kannst du dir beim :hover-Selektor sparen, da es durch den ersten Selektor vererbt wird.

Anmerkung: das display: inline-block sorgt dafür, dass der Button auch die Höhe und Breite übernimmt. Per Standard ist ein <a> ein Inlineelement und kann daher keine Höhe oder Breite per CSS gesetzt bekommen, darum setzt man entweder display: inline-block oder block.

 

[Vert1cal]

Vielen Dank!!!!

Das funktioniert bei mir nun auch
Jetzt bin ich schlauer.

Hier kann dann zu.

Gruß