Antworten zum Thema „Hover mit DIV Container“

[MikeBurna]

Nächstes Projekt, bin gerade so gut dabei.

In meinem DIV Container "galerieleiste"

#galerieleiste {
    background-color: #00FF00;
    clear:left;
    height: 30px;
    width: 1000px;
    z-index: 3;
    position: relative;
    margin:0px;
    padding:0px;
}

möchte ich Buttons haben, die durch DIVs aus der CSS-Datei eingefügt werden und immer bei hover das Bild ändern. Ich habe es so versucht:

.akt a {
    width: 138px;
    height: 30px;
    background-image:url(../../../images/stories/buttons/akt.png)
    text-decoration: none;
}

.akt a:hover {
    width: 138px;
    height: 30px;
    background-image:url(../../../images/stories/buttons/akt_m.png)
    text-decoration: none;
}

Aufgerufen in der index.php so:

<div id="galerieleiste" class="akt"></div>

.

Das sieht schon komisch aus und funktioniert auch nicht. Wie geht das denn wieder richtig?

 

[Tattoomaus78]

AW: Hover mit DIV Container

sowas ähnliches hatte ich mal so gelöst....

allerdings hatte ich die Bilder dann noch verlinkt...vielleicht hilft dir das ja weiter...

<div id="Content">

<a id="bild1" class="bild" href="#"><img src="hover/bild1.jpg" alt="" border="0"></a>
<a id="bild2" class="bild" href="#"><img src="hover/bild2.jpg" alt=""border="0" ></a>
<a id="bild3" class="bild" href="#"><img src="hover/bild3.jpg" alt=""border="0"></a>		
<a id="bild4" class="bild" href="#"><img src="hover/bild4.jpg" alt=""border="0"></a>	

</div>

img {
	border:none;
}

a.bild {
	float:none;
	display:block;
	width:400px;
	height:90px;
	overflow:hidden;
	margin:0.5em 1em;
 
}
a.bild:hover img {
	margin-left:400px;
}

#bild1 { background-image:url(hover/bild1hover.jpg); }
#bild2 { background-image:url(hover/bild2hover.jpg); }
#bild3 { background-image:url(hover/bild3hover.jpg); }
#bild4 { background-image:url(hover/bild4hover.jpg); }
#bild5 { background-image:url(hover/bild5hover.jpg); }

edit: funktioniert nicht im IE 6 aber IE 7, Opera, FF & Co. kapieren das...

 

[MikeBurna]

AW: Hover mit DIV Container

SUPER!GEHT!!! Meine Seite wird so langsam

 

[Tattoomaus78]

AW: Hover mit DIV Container

klar geht das... ....nur wie gesagt, der IE6 bockt da rum

 

[MikeBurna]

AW: Hover mit DIV Container

CSS

#galerieleiste {
    background-color: #00FF00;
    height: 30px;
    width: 1000px;
    z-index: 3;
    position: relative;
    margin:0px;
    padding:0px;
    float: left;
}

img {
    border:none;
}

a.bild {
    float:none;
    width:auto;
    height:30px;
    margin:0px;
    padding:0px;
}

a.bild:hover img {
    border:none;
}

#bild1 { background-image:url(http://www.mikeburnaphotography.de/joomla/images/stories/buttons/akt_m.png); }
#bild2 { background-image:url(http://www.mikeburnaphotography.de/joomla/images/stories/buttons/hochzeit_m.png); }

HTML

<div id="galerieleiste">
        
        <a id="bild1" class="bild" href="http://www.mike-burna.de" target="_blank"><img src="http://www.mikeburnaphotography.de/joomla/images/stories/buttons/akt.png" alt="" border="0"></a>
        
        <a id="bild2" class="bild" href="#"><img src="http://www.mikeburnaphotography.de/joomla/images/stories/buttons/hochzeit.png" alt="" border="0" ></a>
</div>

Wo ist mein Fehlerchen?

 

[Tattoomaus78]

AW: Hover mit DIV Container

was genau klappt nicht?

 

[MikeBurna]

AW: Hover mit DIV Container

was genau klappt nicht?

Ich sehe nur das normale Bild, bei hover passiert nichts. Wenn du das aber mit dem Developer Tool ausblendest, dann siehst du das Hoverbild dahinter, kleiner uns tiefergestellt.

 

[Tattoomaus78]

AW: Hover mit DIV Container

ach sooooooooooo...das soll nen menu mit grafiken werden...richtig?

 

[MikeBurna]

AW: Hover mit DIV Container

ach sooooooooooo...das soll nen menu mit grafiken werden...richtig?

Ja, die Buttons sollen zu versch. Galerien führen, die dann untem im "inhalt" angezeigt werden.

 

[Tattoomaus78]

AW: Hover mit DIV Container

asso...ich dachte du wolltest so irgendwelche Bilder mit nen hovereffekt versehen...

dann versuch folgendes:

#navigation {
width: ....px; /* Gesamtbreite Navi */
height: 50px; /* Hoehe */
padding: 0;
}

#nav {
top: 0px;
list-style: none;
margin: 0;
padding: 0;
height: 50px;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a {
float: left;
padding: 50px 0 0 1px;
overflow: hidden;
height: 0px !important;
}

#home a  {
width: ....px; /* Breite Grafik */
background: url("#/bild1.jpg") top left no-repeat;
}
#home a:hover {
width: ....px;
background: url("#/bild1hover.jpg") top left no-repeat;
}

#nav #home a:active, #nav a.selected {
width: ....px;
background: url("#/bild1hover.jpg") top left no-repeat;
}

<div id="navigation">
   <ul id="nav">
	<li id="home"><a href="index.html">Home</a></li>
   </ul>
</div>