---
title: "hover länk css"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/90434-hover-länk-css"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "MizzK"
published: "2003-11-14T19:15:26.000Z"
updated: "2003-11-16T16:52:32.000Z"
replies: 13
views: 502
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/90434-hover-länk-css"
---
# hover länk css
## #1 — MizzK, 2003-11-14T19:15Z
undrar hur man gör när man vill att en liten bild skall visas främför länken i menyn när man drar över länkarna??
css kan man änvända det? isf föredrara jag det =)
har sökt lite här på forumet men hittade inte d jag sökte =(
Permalänk: https://www.webforum.nu/p/90434
## #2 — frankof, 2003-11-14T19:48Z
Javascript/dhtml
Exempel:
```
```
En grundkod att bygga på ;)
Det blir till att justera lite sedan ;)
p.s. vet inte hur den fungerar, har inte testat, sitter på jobbet nu.
Permalänk: https://www.webforum.nu/p/1205535
## #3 — bossse, 2003-11-14T20:41Z
Frankof skrev:
Det blir till att justera lite sedan.
Gör man det så blir det så här!
```
Start
Bandbrädd
```
Permalänk: https://www.webforum.nu/p/1205557
## #4 — MizzK, 2003-11-14T20:57Z
hmm, vet inte riktigt hur jag ska göra det.. de är så att jag använder mig av en färdig javascript meny, men skulle vilja lägga till så jag får en bild framför.. men hur gör jag det med denna koden??
Permalänk: https://www.webforum.nu/p/1205561
## #5 — bossse, 2003-11-14T22:16Z
Lägg ut koden för javascript menyn då. så ska vi nog fixa det.
Annars blir det väldigt svårt.
Permalänk: https://www.webforum.nu/p/1205616
## #6 — MizzK, 2003-11-14T22:45Z
här
```
var active=null,_oE=null;
var subMenus=[
["sub1","cat","prog"],
["sub2","cat","for"],
["sub3","cat","vip"],
["sub4","cat","noll"],
["sub5","cat","lank"],
["sub6","cat","kont"]
];
function getElm(e){
switch(true){
case typeof(document.all)=="object":
return document.all[e];
case typeof(document.getElementById)=="function":
return document.getElementById(e);
default:
return null;
}
};
function showHide(s){
var e=getElm(s);
if(!e){
return true;
}
if(active&&active!=e.id){
var oE=getElm(active);
if(document.all){
oE.nextSibling.style.display=(window.opera)?"table-row":"block";
} else {
oE.nextSibling.nextSibling.style.display="table-row";
}
oE.style.display="none";
}
else if(!active&&find()){
var i=subMenus.length;
while(i-->0){
if(e==getElm(subMenus[i][0])){
if(document.all){
_oE.nextSibling.style.display=(window.opera)?"table-row":"block";
} else {
_oE.nextSibling.nextSibling.style.display="table-row";
}
continue;
} else {
getElm(subMenus[i][0]).style.display="none";
}
}
}
if(e.style.display==""||e.style.display=="none"){
if(document.all){
e.style.display=(window.opera)?"table-row":"block";
e.nextSibling.style.display="none";
} else {
e.style.display="table-row";
e.nextSibling.nextSibling.style.display="none";
}
} else {
if(document.all){
e.nextSibling.style.display=(window.opera)?"table-row":"block";
} else {
e.nextSibling.nextSibling.style.display="table-row";
}
e.style.display="none";
}
active=e.id;
return false;
};
function find(){
if(subMenus.length<1 || location.search.indexOf("cat=")<1 || location.search.indexOf("cat=pics")>0){
return 0;
}
var
o=subMenus,
i=o.length,
l=location.search;
while(i-->0){
if(l.indexOf(o[i][1])>0){
if(l.split(o[i][1])[1].indexOf(o[i][2])>0){
_oE=getElm(o[i][0]);
if(document.all){
_oE.style.display=(window.opera)?"table-row":"block";
_oE.nextSibling.style.display="none";
} else {
_oE.style.display="table-row";
_oE.nextSibling.nextSibling.style.display="none";
}
continue;
}
}
getElm(o[i][0]).style.display="none";
}
return 1;
};
window.onload=function(){
find();
var a=document.getElementsByTagName("a");
for (var i=0;i
Den bygger på följande enkla CSS-stilar:
```
```
Varje länk kommer att förses med ett 15px tomrum till vänster om sig tack vare paddingen (dvs där visas grundbakgrunden för länken ;) ).
Vid hover läggs en bakgrundsbild "under" länken, men eftersom den positioneras "left" (dvs längst till vänster) så kommer den att visas "före" länken när man för markören över den...
*Lösningen är inspirerad av bl.a. \- fast deras meny utgår från en \-lista vilket gör CSS:en lite klurigare.*
Permalänk: https://www.webforum.nu/p/1205635
## #8 — MizzK, 2003-11-15T00:04Z
visst kan man göra så att det bara är på vissa länkar..
Permalänk: https://www.webforum.nu/p/1205671
## #9 — jarvklo, 2003-11-15T09:28Z
Jupp.
Sätt en class på de länkar du vill ha effekten på och deklarera såhär istället:
```
[...]
Länk med bild före
Länk med bild före
Länk med bild före
Länk med bild före
```
Eller så kan du lägga menylänkarna i en eller flera div:ar såhär (så slipper du skriva så många "class" ;) ):
```
[...]
```
*Förresten - vill du ha dina dropdown-menyer byggda med enbart CSS (alltså helt utan en massa scriptande) så hittar du en bra artikel om hur man gör sådant på *
Permalänk: https://www.webforum.nu/p/1205708
## #10 — MizzK, 2003-11-15T11:46Z
när jag gjorde så, påverkades den av min a:hover kan man undvika det? sen undrar jag hur man gör för att bilden skall stanna kvar när man klickar på länken..
Permalänk: https://www.webforum.nu/p/1205750
## #11 — MizzK, 2003-11-15T12:01Z
om det inte går att lösa med css kan ni väl flytta det till javascript =)
Permalänk: https://www.webforum.nu/p/1205757
## #12 — jarvklo, 2003-11-16T09:05Z
Det går att lösa med CSS om du struktutrerar om din kod lite.
Först delar du upp dokumentet i olika delar med t.ex. \-taggar
```
...
...
...
```
osv.
Sedan deklarerar du en a:hover för varje del istället för din "globala" a:hover såhär:
```
#meny a:hover {...}
#reklamen a:hover {...}
#innehallet a:hover {...}
```
samtidigt som du tar bort din ursprungliga a:hover så funkar det som du vill.
Permalänk: https://www.webforum.nu/p/1206086
## #13 — MizzK, 2003-11-16T11:44Z
måste man ha "ny" hover för varje del man skall ha hover på?? eller kan man köra med class?
Permalänk: https://www.webforum.nu/p/1206173
## #14 — jarvklo, 2003-11-16T16:52Z
Såklart man kan använda class också!
```
a.speciell:hover {...}
[...]
...
```
funkar ju alltid, men man **behöver** inte göra det så "handfast" om man inte vill...
Man kan också kombinera id och en eller flera klasser i ett class-attribut i en och samma tagg såhär:
```
```
I det fallet blir CSS-deklarationen för a:hover i .speciellalankar såhär:
```
.speciellalankar a:hover {...}
```
Kom bara ihåg att när id och class finns samtidigt i en tagg, så gäller stilarna från id:t före stilarna från class:en
dvs finns en
```
#menyn a:hover {...}
```
i din CSS så slås den ihop med
```
.speciellalankar a:hover {...}
```
så att de stilar som finns i definierade i bägge får de värden som finns definierade i
```
#menyn a:hover {...}
```
Exempel:
```
.speciellalankar a:hover {color:green}
#menyn a:hover {color:red}
```
gör att länkarna i
```
```
blir röda vid hover.
Permalänk: https://www.webforum.nu/p/1206339
---
Tråden på webben: https://www.webforum.nu/amne/html-css/90434-hover-länk-css