Hover Effekt nicht nur beim Text

[Zaolat]

Moin Moin,

ich habe in der Navigation eine Listelemente. Diesen habe ich mittels CSS einen Rahmen gegeben. Um den Linktext an sich ist noch freier Platz auf beiden Seiten (mittels padding).

Nun möchte ich beim Hover Effekt, dass nicht nur der Text den Effekt erhält, sondern auch der freie Platz neben dem Text.

Wie geht das?


das ist mein derzeitiger Code:

[

      <div class="navi">
         <ul>
             <li><a href="#">step1</a></li>
             <li><a href="#">step2</a></li>
             <li><a href="#">step3</a></li>
         </ul>
       </div>

.navi li {
	display: inline-block;
	height: 28px;
	width: 103px;
	list-style: none;
	border-left: 1px solid #231f20;
	font-weight: bold;
	text-align:center;
}

.navi a:link {
	color: #231f20;
	text-decoration: none; 
}
.navi a:visited {
	color: #231f20;
	text-decoration: none;
}
.navi a:hover, a:active, a:focus {
	text-decoration: none;
	color: #231f20;
	background-image: url(images/hover_bg.png);
	background-repeat: repeat-x;
}

 

[dn3d_fanboy]

AW: Hover Effekt nicht nur beim Text

Also ich benutze immer noch folgende CSS-Angaben beim a-Element:

width: ;
                    height: ;
                    display: block;

Vielleicht kommst du damit ja weiter.

 

[Stavros]

AW: Hover Effekt nicht nur beim Text

Hallo,

du könntest bei .navi a:link folgendes hinzuergänzen:

.navi a:link {
    color: #231f20;
    text-decoration: none;
    padding: 5px 0 5px 0;
    display:inline-block;
    width: 100px;
}

Zur Erklärung:
- Padding sorgt für den inneren Abstand der Schrift bzw. des Links
- display: inline-block soll ermöglichen, die Höhe bzw. Breite des Links zu verändern.
- Schießlich sollte eine entsprechende Weite angegeben werden. Ich habe beispielsweise 100 Pixel verwendet, weil deine Links 108 Pixel lang/weit sind.

Du kannst auch gerne mit den Padding-Werten oder Länge herumspielen, bis es eben für dich persönlich gut ausschaut.

In meinem Beispiel sieht das so aus:



Ich hoffe, ich konnte ein kleines Bisschen helfen.


Viele Grüße
Stavros

 

[Zaolat]

AW: Hover Effekt nicht nur beim Text

Danke Dir Stavros

genau das paßt wie gewünscht... natürlich mit den angepassten Daten.