Navigation mit Hover Effekt (Bild und Text Kombination)
5 Beiträge Seite 1 von 1
Navigation mit Hover Effekt (Bild und Text Kombination)
Da ich nun einen Scherbenhaufen habe frage ich mal um Hilfe an.Die Buttons bei der Sidebar welche der Navigation dienen sollen
sind Grafiken (7x identisch).Der Text zur Grafik soll anschliessend
im Link generiert werden (auf der Grafik).
Die Grafik für den Hover Effekt ist wie alle Grafiken .png mit Transparenz.
Die sidebar hat ein background-image.
Nach dem ich den Button zerteilt und platziert hatte musste ich feststellen
dass ich über css den hover effekt nicht hinbekomme.
Also setze ich nun den ganzen Button ein und versuche den Text darüber
zu setzen.
Nun finde ich aber weder genaue Beschreibungen noch ähnliches das mir
weiterhelfen könnte. Unmöglich kann es nicht sein :)
Aktuell was noch als ansetz vorhanden ist.
- Code: Alles auswählen
#sidebar {
float: left;
width: 249px;
height: 727px;
margin: 0;
padding-top: 64px;
background: url(../images/navbg.png) no-repeat;
}
.but {
float: left;
width: 249px;
height: 57px;
margin: 0 0 11px 0;
background-image: url(../images/abut.png) no-repeat;
}
Im html war es
im <nav> positioniert als <a href>
Wäre dankbar wenn mir jemand das Licht zeigen könnte.
Re: Navigation mit Hover Effekt (Bild und Text Kombination)
könnten Sie bitte teilen Sie das Bild als auchRe: Navigation mit Hover Effekt (Bild und Text Kombination)
ja der ansatz passt da der mittlere teil des bildes mit repeat-x über die breite gespannt ist.hab es wieder angepasst auf den ursprünglichen zustand
- Code: Alles auswählen
#sidebar {
float: left;
width: 249px;
height: 727px;
margin: 0;
padding-top: 64px;
background: url(../images/navbg.png) no-repeat;
}
.butl:hover {
float: left;
width: 14px;
height: 57px;
margin: 0 0 11px 0;
background-image: url(../images/abutl.png) no-repeat;
}
.butm:hover {
float: left;
width: 219px;
height: 57px;
margin: 0 0 11px 0;
background-image: url(../images/abutm.png) repeat-x;
}
.butr:hover {
float: left;
width: 16px;
height: 57px;
margin: 0 0 11px 0;
background-image: url(../images/abutr.png) no-repeat;
}
*********************
<nav id="sidebar">
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
<a href="#"><img class="butl" src="images/abutl.png"/><img class="butm" src="images/abutm.png"/><img class="butr" src="images/abutr.png"/></a>
</nav>
Wie passe ich den text nun ein in den link so dass er immer lesbar ist?
Der Hover muss nun ebenso die drei grafiken + text enthalten
Re: Navigation mit Hover Effekt (Bild und Text Kombination)
Hi,das :hover greift ausschließlich, wenn das Element mit der Maus "überfahren" wird. Wenn hier drei Elemente (Klassen) betrachtet werden, weil es der linke, mittlere und rechte Teil des Buttons ist, dann greift das :hover wahrscheinlich nur in der Mitte, weil dort wohl der Linktext stehen wird.
Wenn die Buttons immer die gleiche Breite haben, dann einfach eine ganze Button-Grafik generieren und dann den kompletten Button (Hintergrundgrafik) per CSS bei einem Hover austauschen.
Ich hoffe, ich habe es richtig verstanden und werde verstanden.
Re: Navigation mit Hover Effekt (Bild und Text Kombination)
I have the same problemسایت تخفیف
https://www.tipbazar.ir
Seite 1 von 1