webForumDet fria alternativet

Sätta bakgrund i style och bakgrundsposition vid hover med class?

HTML & CSS

9 svar · 589 visningar · startad av bassebhu

Medlem sedan nov. 20016 480 inlägg
Frågan#1

Som rubriken säger... Är det möjligt?

Jag har en del <a>-element som får bakgrunder med hjälp av style="", men sedan vill jag ompositionera dessa bakgrunder med hjälp av class="" som hämtar ifrån en extern css-mall.

Det verkar inte fungera. Troligen för att den tycker att bakrunden ska vara där den är då den är angiven med style och ska inte kunna flyttas med class. Finns det något sätt att få classen att prioriteras högre än style i detta fall, så att jag inte behöver lägga in all bakgrundsinfo i css-mallen?

Alternativet jag har kört är med onmouseover="", men det vore kalas om det gick att få in hovern i css-mallen.

Taxi!

Medlem sedan nov. 20016 480 inlägg
#2

Jag undrar nog kort sagt ifall man kan se till så att en class är starkare än vad som anges i style?
Om inte, går min fundering att lösa på annat sätt?

Medlem sedan dec. 20042 245 inlägg
#3

Varför använder du style=""? Det alltid har högre specificitet än en extern stilmall, så om du vill överskrida style="" med en extern stilmall måste du använda !important.

Bättre vore att göra allt med den externa stilmallen tror jag. :)

Medlem sedan nov. 20016 480 inlägg
#4

zcorpan skrev:

Varför använder du style=""? Det alltid har högre specificitet än en extern stilmall, så om du vill överskrida style="" med en extern stilmall måste du använda !important.

Bättre vore att göra allt med den externa stilmallen tror jag. :)

Även om det bara är bilder som ska förekomma på vissa sidor? Men du kanske har rätt. Det där med !important vore ändå kul att kunna. Berätta, berätta :)

Medlem sedan dec. 20042 245 inlägg
#5

bassebhu skrev:

Även om det bara är bilder som ska förekomma på vissa sidor?

Ja. style="" är <font> i förklädnad. :)

Men om bilden är väsentligt för innehållet bör du använda <img> och inte en bakgrundsbild.

bassebhu skrev:

Det där med !important vore ändå kul att kunna. Berätta, berätta :)

<div style="background:yellow">test</div>
div:hover { background:lime !important; }
Medlem sedan nov. 20016 480 inlägg
#6

Det handlar om undermenyer, med hover. Det tycker jag ingår i sidstruktur och img bör därav inte användas(?)

Medlem sedan dec. 20042 245 inlägg
#7

Jag förstår inte riktigt hur du menar, men om du tycker att det borde vara en bakgrund så borde det väl vara en bakgrund. :)

Medlem sedan nov. 20016 480 inlägg
#8

Jag menar att det ska vara bilder, knappar i en meny. Det är inga foton eller liknande, utan ingår i sidans struktur. Det var det som gjorde att jag valde background för dem. Har även blivit tipsad förut om att göra menyer med antingen floatade divar eller med ul/li.

Du är av annan åsikt?

Medlem sedan maj 20007 492 inlägg
#9

Du kan använda bilder här, om sidans design ser ut så att du kan använda en vanlig font för länkarna så är det givetvis bäst.

Annars döljer du din meny-text och bilderna lägger du som bakgrundsbilder. Just det jag använder här förutsätter att alla bilder är lika breda och har samma höjd.
Sen använder du bara en bild för varje meny-länk. Först den vanliga bilden och under den bilden kommer din hover-bild. På så sätt slipper du använda någon form av preload eller få en sekund med vitt (så som det är för dig i sängen) eftersom allt redan laddas in från början.

<ul>
<li><a href="nav1.html" title="nav1" class="nav 1"><span class="hide">Nav1</span></a></li>
<li><a href="nav2.html" title="nav2" class="nav 2"><span class="hide">Nav2</span></a></li>
</ul>
ul {allt css för ul}
li {all css för li}
.hide {display:none}
.nav{width:120px; height: 30px; borde: 1px solid #000;}
.1 {background: url(nav1.gif) 0 0 no-repeat;}
.2 {background: url(nav2.gif) 0 0 no-repeat;}
.rubrik:hover {background-position: 30px 0;}

...eller nått.

Medlem sedan sep. 200922 inlägg
#10

stilmall....

oj, fel..

256 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)