---
title: "Border runt en länk på mouse over"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/104358-border-runt-en-länk-på-mouse-over"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "mattiasnordin"
published: "2004-05-26T09:16:37.000Z"
updated: "2004-05-26T13:50:12.000Z"
replies: 31
views: 692
page: 1
pages: 2
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/104358-border-runt-en-länk-på-mouse-over"
---

# Border runt en länk på mouse over

_Sida 1 av 2._

## #1 — mattiasnordin, 2004-05-26T09:16Z

Hej alla,

Kan man få till en border (som på en bild) runt en länk på ett onMouseOver event?

 :q

Permalänk: https://www.webforum.nu/p/104358

## #2 — jarvklo, 2004-05-26T09:19Z

Det kan man säkert, men går det inte lika bra med enbart CSS ;) ?

```
[s]a {border:1px solid transparent}
a:hover {border:1px solid blue}[/s]
/* uppdaterat - man skall visst testa innan man skriver :r */
a {display:inline-block;border:1px solid white}
a:hover {border:1px solid blue}
```

Bordern på \<a\> är med för att länken garanterat inte skall "hoppa" när markören kommer över den ;)

Permalänk: https://www.webforum.nu/p/1354066

## #3 — mattiasnordin, 2004-05-26T09:25Z

Borde man inte kunna göra så här? Det fungerar inte för mig med hover.

\<style type="text/css"\>
\<!--
.test {border:1px solid transparent;}
.test:hover {border:1px solid blue;}
.test:active {background: #111;}
\--\>
\</style\>

\<a class="test" href=""\>fdsf\</a\>

Permalänk: https://www.webforum.nu/p/1354068

## #4 — nitro2k01, 2004-05-26T09:25Z

Skulle du absolut vilja ha använda onmouseover på en bild ser det ut så här:

```
 
<img onmouseover="this.style.border='1px solid blue'; " onmouseout="this.style.border='1px solid transparent'; " style="border: 1px solid transparent;" src=... />
```

 
Detta gör precis samma sak som järvklos CSS, men dock bara på bilden, och inte på ev text bredvid bilden, inom a-taggarna.

Permalänk: https://www.webforum.nu/p/1354069

## #5 — nitro2k01, 2004-05-26T09:27Z

> **mattiasnordin skrev:**
>
> Borde man inte kunna göra så här? Det fungerar inte för mig med hover.
> 
> \<style type="text/css"\>
> \<!--
> .test {border:1px solid transparent;}
> .test:hover {border:1px solid blue;}
> .test:active {background: #111;}
> \--\>
> \</style\>
> 
> 
> \<a class="test" href=""\>fdsf\</a\>

Jo det borde man, ~~men Internet Explorer bojkottar den syntaxen~~ :bla . (Däremot ska det funka utmärkt i Mozilla och Opera)

Man ska som järvklo säger testa sin kod... Kolla jojoxx inlägg ovan. IE verkar för övrigt bara bojkotta den koden för andra objekt än A. (Jag trodde innan jag hade testat att det inte gick att definiera hover till klassdefinitioner i IE)

Permalänk: https://www.webforum.nu/p/1354070

## #6 — jarvklo, 2004-05-26T09:27Z

:r
Jag hade fel ovan... Man måste tydligen lägga på display:inline-block för att det skall fungera (+ att transparent som färg tydligen inte är så bra på länkar om man vill ha kontroll)...

Har ändrat exemplet nu ;)!

Permalänk: https://www.webforum.nu/p/1354071

## #7 — mattiasnordin, 2004-05-26T09:31Z

Får det fortfarande inte att fungera. Har MsIE 6.0.

\<style type="text/css"\>
\<!--
.test {display:inline-block;border:1px white;}
.test:hover {border:1px solid blue;}
\--\>
\</style\>

\<a class="test"\>fdsfds\</a\>

Permalänk: https://www.webforum.nu/p/1354074

## #8 — jarvklo, 2004-05-26T09:33Z

```
a.test {
  display:inline-block;
  border:1px solid white;
}
a.test:hover {border:1px solid blue}
```

funkar för mig i MSIE ;)

Permalänk: https://www.webforum.nu/p/1354075

## #9 — mattiasnordin, 2004-05-26T09:33Z

> Jo det borde man, men Internet Explorer bojkottar den syntaxen  . (Däremot ska det funka utmärkt i Mozilla och Opera)

Kanske ska läsa också... Jag kör javascript varianten istället. Längre kod, men fungerar :)

Permalänk: https://www.webforum.nu/p/1354076

## #10 — nitro2k01, 2004-05-26T09:37Z

> **mattiasnordin skrev:**
>
> .test {display:inline-block;border:1px **solid** white;}

Du glömde solid där, om du nu undrar.  :)
Men jag skulle ändå kör javascript-varianten.

Permalänk: https://www.webforum.nu/p/1354079

## #11 — mattiasnordin, 2004-05-26T09:37Z

Ash då... my bad... 

Man var tvungen att ha med href="#" i länken för att det skulle fungera.

Min "länk" såg ut så här:

```
<a class="test"  onClick="set_path_form.selected_path_and_file.value='<%=Replace(objFolder.path, "\", "/")%>/<%=objFile.Name%>'"><%=objFile.Name%></a>
```

Ny fråga. Går det att få till "mouse over/hover" funktionen med CSS på en \<a\>blaj\</a\> tag ?

Permalänk: https://www.webforum.nu/p/1354080

## #12 — jarvklo, 2004-05-26T09:46Z

> **mattiasnordin skrev:**
>
> Ny fråga. Går det att få till "mouse over/hover" funktionen med CSS på en \<a\>blaj\</a\> tag ?

Du menar annorlunda än [såhär](http://www.webforum.nu/showthread.php?s=&postid=856546#post856546) §e 

Beror på vad du vill göra ;)
Du kan använda all CSS du kan tänka dig och fortfarande få det att fungera i de flesta webbläsarna, men vill du fnula in javascript-funktioner via CSS så är den mekanismen ([behaviours](http://msdn.microsoft.com/workshop/author/behaviors/overview.asp)) högst MSIE-specifik... :birp

Permalänk: https://www.webforum.nu/p/1354081

## #13 — mattiasnordin, 2004-05-26T09:49Z

Jag tycker att lösningen i inlägg #856546 är bra. Men jag vill ta bort href="#" från \<a...\> taggen.

Då fungerar inte hover i exemplet ovan. Föredrar helt klart att använda CSS.

Permalänk: https://www.webforum.nu/p/1354085

## #14 — Web-Tor, 2004-05-26T09:50Z

Varför vill du ha bort **href="#"**?

Permalänk: https://www.webforum.nu/p/1354087

## #15 — jarvklo, 2004-05-26T09:56Z

Hmm 
Har du testat den här: <http://dean.edwards.name/IE7/>

dean försöker ju få MSIE att "bli som folk" (dvs funka som standard) via sitt "IE7"-behaviour ;)

Permalänk: https://www.webforum.nu/p/1354089

## #16 — Fredde Mannen, 2004-05-26T10:05Z

> **Web-Tor skrev:**
>
> Varför vill du ha bort **href="#"**?

 har den funderingen med? :q

Permalänk: https://www.webforum.nu/p/1354091

## #17 — mattiasnordin, 2004-05-26T12:17Z

> Varför vill du ha bort href="#"?

Jag vill inte att sidan ska laddas om.

Man kanske ska använda något annat än ett \<a\> objekt om det inte ska användas som en länk...  :q

Permalänk: https://www.webforum.nu/p/1354139

## #18 — cyprys, 2004-05-26T12:18Z

> Jag vill inte att sidan ska laddas om.

Det gör den väl ändå inte?

Permalänk: https://www.webforum.nu/p/1354141

## #19 — Web-Tor, 2004-05-26T12:21Z

> Jag vill inte att sidan ska laddas om.

Lägg till **return false;** sist i ditt onclick-attribut. ;)

Permalänk: https://www.webforum.nu/p/1354142

## #20 — mattiasnordin, 2004-05-26T12:31Z

> Det gör den väl ändå inte?

Jo, href="#" laddar om sidan och letar efter ett "a name" som inte är definierat (om jag inte har fått det om bakfoten).

Permalänk: https://www.webforum.nu/p/1354153

---

Tråden på webben: https://www.webforum.nu/amne/html-css/104358-border-runt-en-länk-på-mouse-over  
Nästa sida: https://www.webforum.nu/amne/html-css/104358-border-runt-en-länk-på-mouse-over/page2.md