[css] mehrfacher mouseover

Fishbone22

Fishbone22

Hallo zusammen :)
ID: 89701
L
20 April 2006
253
4
Hallo =)

Ich habe folgendes Problem. Ich habe 7 stellen wo ich mit mouseover arbeite. Das möchte ich gerne mit css reallisieren. Habe im Internet auch schon Beispiele gefunden aber das geht nur ein mal. die anderen werden nicht angezeigt. Wie kann ich per CSS mehrere verschiedene Mouseover erstellen? Also Bild 2 ersetzt Bild 1 beim Mouseover.


Mfg, Fishbone22
 
HTML: 
<div onmouseover="this.className='class1';" onmouseout="this.className='class2';">Test</div>
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
  <head>
    <title>Mouseover</title>
    <style>
      div.hnboomax1 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax.png");}
      div.hnboomax2 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax2.png");}
    </style>
  </head>
  <body>
        <div onmouseover="this.className='hnboomax1';" onmouseout="this.className='hnboomax2';">
        </div>
  </body>
</html>

Es müsste dann ja so gehen. Geht aber nich... Oder hab ich wasfalsch gemacht/verstanden?
 
Fishbone22 schrieb:
Es müsste dann ja so gehen. Geht aber nich... Oder hab ich wasfalsch gemacht/verstanden?
Zum Vergrößern anklicken....
Mal am Rande: dafür, dass dein Code angeblich XHTML Strict sein soll, ist eine "<style>"-Definition gänzlich daneben.

Schmeiß' entweder die erste (und evtl. gleich die zweite dazu) Zeile aus deinem Code oder mach wenigstens ein "<style type="text/css">" aus deiner Zeile 6.
Bei letzterem steigt schonmal die Chance, dass der Code irgendwie funktionieren kann.
 
HTML: 
<html>
  <head>
    <title>Mouseover</title>
    <style type="text/css">
      div.hnboomax1 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax.png");}
      div.hnboomax2 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax2.png");}
    </style>
  </head>
  <body>
        <div onmouseover="this.className='hnboomax1';" onmouseout="this.className='hnboomax2';">
        </div>
  </body>
</html>

geht nicht...
 
Schau dir die Größe deines DIVs an oder denke zumindest theoretisch darüber nach: ein DIV nimmt von Haus aus die volle zur Verfügung stehende Breite ein und erhält die Höhe, die es zur Darstellung seines Inhaltes benötigt.
In deinem Fall wäre das ein ziemlich langer, horizontaler "Strich".
Und ein Strich ist nur ungenügend für MouseOver-Spielchen geeignet.

Gib dem DIV eine Höhe und eine Breite, die für das Bild angemessen ist und du wirst Erfolg haben!
 
wieso ein ziemlich langer strich? 76x30px ist doch kein langer strich...

Also ich habe dem div per css die größe gegeben die min. sein muss also so groß wie das bild.

HTML: 
<html>
  <head>
    <title>Mouseover</title>
    <style type="text/css">
      #div1 {width: 76px; height: 30px;}
      div.hnboomax1 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax.png");}
      div.hnboomax2 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax2.png");}
    </style>
  </head>
  <body>
        <div id="div1" onmouseover="this.className='hnboomax1';" onmouseout="this.className='hnboomax2';">
        </div>

  </body>
</html>

so meinste doch oder? geht nicht :/

PS: habs auch direkt im div veruscht mit width="" und height="", ging auch net
 
Nur mal so nebenbei: Es soll doch mit CSS gemacht werden ? Ihr verwendet alle JavaScript und wenn ich das deaktiviere, dann guckt ihr dumm, weil dann nix mehr geht ;)

Statt
Code: 
#div1 {width: 76px; height: 30px;}
div.hnboomax1 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax.png");}
div.hnboomax2 {width: 76px; height: 30px; background:url("https://www.boomax.de/_img/header/boomax2.png");}
HTML: 
<div id="div1" onmouseover="this.className='hnboomax1';" onmouseout="this.className='hnboomax2';">
</div>
so machen:
Code: 
#div1 {
  width: 76px; height: 30px;
  background:url("https://www.boomax.de/_img/header/boomax.png");
}
#div1:hover {
  background:url("https://www.boomax.de/_img/header/boomax2.png");
}
HTML: 
<div id="div1"></div>
Wegen Höhen-Problem: Ich habs bei mir probiert, das geht astrein, weil ja die Höhe für den Container angegeben is. Im CSS genügt es, einmal Höhe und Breite anzugeben. :hover erbt ja die Maße.

Noch eine Anmerkung: Mein Code is zwar schön und gut und funktioniert auch, allerdings dürfte der IE vermutlich Probleme damit haben, weil der CSS nicht korrekt interpretiert. D.h. für IE müsste dann doch n Hack und Einsatz von JavaScript ran :-?
 
danke geht ^^ und das mit dem IE. Also der zeigt wenigstens das normale bild an. is zwar dumm (sch**** IE) :mrgreen: aber was solls... THX
 
theHacker schrieb:
Das schon. Aber er weigert sich, :hover-Styles für alle Elemente außer <a>-Tags zu akzeptieren.
Zum Vergrößern anklicken....

Hi

Also die aussage wollte ich mal testen, <div></div> funktionieren auch im IE mit :hover.
Getestet mit IE 7

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">


MfG Igel
 
Igelknie schrieb:
Getestet mit IE 7
Zum Vergrößern anklicken....
Firefox, Opera und IE 7 interpretieren korrekt. Aber IE<=6 interpretiert nur gehoverte Links. Kannst ja mal testen, hier hab ich ein paar Fälle:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>:hover-Test</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />

<style type="text/css">
a {
  background-color: #ff7f7f;
}
a:hover {
  background-color: #7fff7f;
}

div {
  background-color: #ff7f7f;
}
div:hover {
  background-color: #7fff7f;
}

p {
  background-color: #ff7f7f;
}
p:hover {
  background-color: #7fff7f;
}

h1 {
  background-color: #ff7f7f;
}
h1:hover {
  background-color: #7fff7f;
}

li {
  background-color: #ff7f7f;
}
li:hover {
  background-color: #7fff7f;
}

td {
  background-color: #ff7f7f;
}
td:hover {
  background-color: #7fff7f;
}
</style>
</head>

<body>
<h1>heading</h1>
<div>div</div>
<p>paragraph<br />
<a href="#">anchor</a></p>
<ul>
  <li>unnumered listing. line</li>
  <li>unnumered listing. line</li>
  <li>unnumered listing. line</li>
</ul>
<table>
  <tr><td>table data</td><td>table data</td></tr>
  <tr><td>table data</td><td>table data</td></tr>
</table>
</body>
</html>
 
Ehm Also ich hab das gerade versucht 2 mal in die Seite einzubauen like:

HTML: 
<html>
  <head>
    <title>Mouseover</title>
    <style type="text/css">
#div1 {
  width: 76px; height: 30px;
  background:url("https://www.boomax.de/_img/header/boomax.png");
}
#div1:hover {
  background:url("https://www.boomax.de/_img/header/boomax2.png");
}
#div2 {
  width: 77px; height: 30px;
  background:url("https://www.boomax.de/_img/header/boomunity.png");
}
#div2:hover {
  background:url("https://www.boomax.de/_img/header/boomunity.png");
}
    </style>
  </head>
  <body>
        <div id="div1">
        </div>
        <div id="div2">
        </div>
  </body>
</html>

das geht nicht... :ugly:
 
:oops::oops::oops: oh das is natürlich ne erklärung... :mrgreen: sorry da hab ich garnich mehr drann gedacht ^^ -.-'' >>> Dankeschön <<<

Mfg, Fishbone22
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben