mouseover mit css

[julee]

Sorry, falls ich bereits die x.... bin, die diese Frage stellt, aber finde einfach keine Antwort, die auf mein Problem passt - oder besser, habs bisher noch nciht so recht verstanden, weil ich css-Neuling bin!


Ich habe angefangen im Dreamweaver eine Seite zu erstellen. Ich arbeite mit Html und parallel dazu mit einem CSS skript.

Nun habe ich folgendes vor:

Ich habe Buttons erstellt die im html - skript als Links eingetragen sind. Wenn ich jetzt den Mouseovereefekt verwenden will, was muss ich tun!
Meine Buttons sind mit Fireworks erstellt. Wenn man mit der Maus drüber geht, soll sich farblich was ändern. Dafür habe ich mit Fireworks weitere Buttons erstellt.
Muss ich jetzt für jeden Button ein eigenes div-tag (heißt das so? :-D )erstellen? Hab mal mit dem home-Button angefangen!

Hier mein Skript:


<div class="menu">
<div class="home">
<a href="buttons_menueleiste/home.png">
</a>
<div class="homever">
<a href="buttons_menueleiste/home_over.png">
</a>
</div>
</div>
<a href="seite1.html">
<img src="buttons_menueleiste/grammar.png" width="120" height="80" border="0" />
</a>
<a href="seite1.html">
<img src="buttons_menueleiste/test.png" width="120" height="80" border="0" />
</a>
<a href="seite1.html">
<img src="buttons_menueleiste/guestbook.png" width="120" height="80" border="0" />
</a>
<a href="seite1.html">
<img src="buttons_menueleiste/links.png" width="120" height="80" border="0" />
</a>
</p>
</div>


und mein css-skript - im bereich menü sollen die button dann liegen!

div.menu
{
width:129px;
height:540px;
text-align:center;
float:left;
background-color:#CCC;
border-left:1px dotted black;
border-right:1px dotted black;
}
div.home
{
width:auto;
height:auto;
background-image:url(../buttons_menueleiste/home.png);
background-repeat:no-repeat;
}
div.home:hover
{
width:auto;
height:auto;
background-image:url(../buttons_menueleiste/home_over.png);
}


Jetzt brauch ich den profi, der mein Chaos wieder zurecht rückt!

Wer kann mir helfen?

 

[dewey]

wieso machst das nicht einfach mit bilder austauschen? befindet sich in den eigenschaften des bildes bei verhalten.

 

[julee]

wo kann ich die eigenschaften bzw. das verhalten der bilder finden?

 

[julee]

ha - habs gefunden - die buttons lagen nur aufeinander!

jetzt funktionierts!

freu...danke trotzdem!

 

[mschoening]

Hi,
das Menü wäre so semantisch korrekter:

<style type="text/css" media="screen">
    a:link, a:visited {
        color: #505050;
        text-decoration: none;
    }
    
    ul#menu {
        list-style: none;
    }
    
    #menu li {
        /* Kommentar entfernen für horizontales Menü:
        float: left;
        */
        line-height: 25px;
    }
    
    #menu li a:link, #menu li a:visited {
        display: block;
        width: 100px;
        height: 25px;
        background-color: #dadada;
        /* background-color ersetzen durch background-image */
    }
    
    #menu li a:hover {
        background-color: #999;
        /* background-color ersetzen durch background-image */
    }    
</style>



<ul id="menu">
    <li><a class="home" href="#">Home</a></li>
    <li><a class="grammar" href="#">Grammar</a></li>
    <li><a class="guestbook" href="#">Guestbook</a></li>
    <li><a class="links" href="#">Links</a></li>
</ul>

Wenn du Fragen dazu hast melde dich per PN.

LG,
Max

 

[DivDax]

m.schoening's Version sieht schon wensetlich besser aus!
Zudem sei gesagt das ein hover nur bei Links zulässig ist.

 

[mschoening]

Hi,
@DivDax: Das stimmt nicht ganz. Die Pseudoklasse :hover ist nicht nur bei Link-Selektoren zulässig. Das Problem ist jedoch das IE 5.5 (und 6) diese Pseudoklasse nur bei Link-Selektoren erkennt. Theoretisch darf man dies also benutzen, ist aber nicht ratsam.

Zitat aus A List Apart:

The :hover pseudo class should work with any element, but in Internet Explorer it only works with links. So. What’s the use [...] when it only works on -2.6% of browsers? Not much, to be honest. We need to apply a little bit more magic.

Wenn es nicht anders geht schafft ein Javascript mit onmousover Abhilfe...

 

[KayHH]

Ich mag ja diese Variante. Der Vorteil ist, dass man so auch was komplexeres als einfach nur einen farbigen Hintergrund nehmen kann, z.B. Bilder die beim MouseOver von schwarz/weiß auf farbig switchen.

<style type="text/css">
  #menu a {
    display:block;
    width:135px;
    margin: 1em 0; padding:8px 0 10px 15px;
    font: bold 14px/1 sans-serif;
    color:black;
    background: url(button.gif) 0 0 no-repeat;
    text-decoration: none;
  }
  #menu a:hover {	
    background-position: -150px 0;
    color:#cccccc;
  }
  #menu a:active {
    background-position: -300px 0;
    color: white;
  }
</style>

<div id="menu">
  <a href="(EmptyReference!)">Blog</a>
  <a href="(EmptyReference!)">Podcast</a>
  <a href="(EmptyReference!)">apfeltalk</a>
</div>

Das Bild sieht dann wie folgt aus. Der Witz an dieser Technik ist, dass ein Bild alle Varianten enthält und beim MouseOver oder Klicken einfach entsprechend verschoben wird.


KayHH

 

[mschoening]

Ja das geht ja auch bei meinem ...das gute an der Technik ist, das :hover braucht nicht extra zu laden und dan hakt das nicht so! Für background-image auf jeden Fall die beste Lösung.

Einen Vorschlag hätte ich noch für dich Kay:

#menu a {
     display:block;
     width:135px;
     height: [COLOR=Red]XX[/COLOR]px;
     margin: 1em 0; 
     padding-left: 15px;
     color:black;
     font: bold 14px/1 sans-serif;
     text-decoration: none;
     line-height: [COLOR=Red]XX[/COLOR]px; /*Hier den wert XX von height einsetzen*/
     background: url(button.gif) 0 0 no-repeat;
  }