• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

hover mit id

S

sin777

Neues Mitglied
hallo, ich möchte, dass wenn ich über einen button fahre, dieser sein bild ändert. ist das irgendwie mit der kombi id + hover möglich oder was gibt es sonst noch für möglichkeiten?

Vielen Dank im voraus.
 
HTML: 
<style>

#button
{ background: url(button.png); }

#button:hover
{ background: url(button_hover.png); }

</style>


<button id="button">Klick</button>
 
sorry, ich habe mich falsch ausgedrückt. ich habe ein bild, welches ein link ist und wenn ich über das bild fahre, dann möchte ich, dass dasselbe sich ändert.
 
HTML: 
 <style>
  #link
  { position: relative }

  #hover
  { display:none; }

  #hover, #unhover
  {
    position: absolute;
    left: 0;
    top: 0;
/* evtl. width: ...; height: ... */
  }

  #link:hover #hover
  { display: block; }
 </style>


 <a id="link" href="#">
  <span id="unhover"><img src="buton.png"></span>
  <span id="hover"><img src="button_hover.png"></span>
 </a>
 
Ich habe es jetzt Folgendermaßen gelöst. Wenn ich display und visibility verwende, dann flashen (tauchen auf und verschwinden) die bilder komischerweise pausenlos, wenn ich hover verwende. Vielleicht kann mir ja jemand erklären warum das bei dieser Variante nicht passiert bzw. warum das bei display und visibilty passiert. Das würde mich wirklich sehr interessieren!!! VIELEN DANK :) Weiterhin würde mich interessieren, warum, wenn ich statt den 8 divs spans benutze, die bilder gar nicht erst angezeigt werden. Meine Lösung:

HTML: 
<html>
    <head>
        <title>Homepagetest</title>

        <style type="text/css">
            body {
                background: black url("transBack.png") fixed no-repeat center;
            }

            #main {
                width: 680px;
                height: 500px;
                position: absolute;
                margin-top: -250px;
                margin-left: -340px;
                top: 50%;
                left: 50%;
                opacity: 0.8;
            }

            #header {
                width: 680px;
                height: 70px;
                margin-top: -10px;
                margin-bottom: 15px;
            }

            #menu {
                width: 150px;
                height: 420px;
                margin-top: 5px;
                margin-right: 5px;
                float: left;
            }

            #anzeige {
                width: 520px;
                height: 420px;
                margin-top: 5px;
                margin-left: 5px;
                float: left;
            }

            .buttons {
                width: 150px;
                height: 50px;
                margin-bottom: 2px;
            }

            #test:hover {
                width: 0;
                height: 0;
            }

            #point1 {
                background: url("home.png") no-repeat;
            }

            #point1:hover {
                background: url("homeGlow.png") no-repeat;
            }

            #point2 {
                background: url("uebermich.png") no-repeat;
            }

            #point2:hover {
                background: url("uebermichGlow.png") no-repeat;
            }

            #point3 {
                background: url("bilder.png") no-repeat;
            }

            #point3:hover {
                background: url("bilderGlow.png") no-repeat;
            }

            #point4 {
                background: url("downloads.png") no-repeat;
            }

            #point4:hover {
                background: url("downloadsGlow.png") no-repeat;
            }

            #point5 {
                background: url("chat.png") no-repeat;
            }

            #point5:hover {
                background: url("chatGlow.png") no-repeat;
            }

            #point6 {
                background: url("gaestebuch.png") no-repeat;
            }

            #point6:hover {
                background: url("gaestebuchGlow.png") no-repeat;
            }

            #point7 {
                background: url("links.png") no-repeat;
            }

            #point7:hover {
                background: url("linksGlow.png") no-repeat;
            }

            #point8 {
                background: url("impressum.png") no-repeat;
            }

            #point8:hover {
                background: url("impressumGlow.png") no-repeat;
            }
        </style>
    </head>

    <body>
        <div id="main">
            <div id="header">
                <img src="headline.png" width="680" height="90" />
            </div>

            <div id="menu">
                <div class="buttons "id="point1"></div>
                <div class="buttons "id="point2"></div>
                <div class="buttons "id="point3"></div>
                <div class="buttons "id="point4"></div>
                <div class="buttons "id="point5"></div>
                <div class="buttons "id="point6"></div>
                <div class="buttons "id="point7"></div>
                <div class="buttons "id="point8"></div>
            </div>

            <div id="anzeige">
                <img src="anzeige.png" width="520" height="420" />
            </div>
        </div>
    </body>
</html>
 
Zuletzt bearbeitet:
Wenn ich display und visibility verwende, dann flashen (tauchen auf und verschwinden) die bilder komischerweise pausenlos, wenn ich hover verwende
Zum Vergrößern anklicken....
Dieses Problem ist mir noch nie untergekommen. Und weiß daher auch nicht, wieso die dann so "flashen". :|

Weiterhin würde mich interessieren, warum, wenn ich statt den 8 divs spans benutze, die bilder gar nicht erst angezeigt werden.
Zum Vergrößern anklicken....
Weil spans inline-Elemente sind, und sich an dessen (in diesem Fall leerem) Inhalt anpassen
 
Danke alogheo aber auf deinen letzten Satz würde ich gerne nochmal eingehen :)

Wie meinst Du das mit dem leeren inhalt anpassen? ich habe durch die class "buttons" den span-Elementen doch eine breite und höhe gegeben. Also müssten die bilder auch da drinne angezeigt werden (was sie aber ja nicht tuen)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben