---
title: "Byt class på ett a element inom ett div element"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/189038-byt-class-på-ett-a-element-inom-ett-div-element"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "saturday"
published: "2012-01-25T14:09:59.000Z"
updated: "2012-01-25T15:04:38.000Z"
replies: 3
views: 444
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/javascript/189038-byt-class-på-ett-a-element-inom-ett-div-element"
---

# Byt class på ett a element inom ett div element

## #1 — saturday, 2012-01-25T14:09Z

Hej!

Jag har ett problem. Jag har en div som heter "#project-button", inuti den finns en \<a href=""\>\</a\>. A-elementet ärver ju sin class från den globala "a{}" som jag definierat egenskaperna för i CSS-filen.

Till problemet, jag vill att om man drar muspekaren över diven (#project-button) så ska a-elementet, som ligger i denna div, byta ut sin klass. Jag försöker göra detta via Jquery. Den koden ser ut så här:

```
// CHANGE CLASS ON HOVER
$("#project-button").mouseover(function(){
   $("#project-button a").removeClass().addClass(".project-button-link_hover");
}).mouseout(function(){
   $("#project-button a").removeClass().addClass("a");
});
```

Så vad jag vill göra är helt enkelt att så fort muspekaren kommer över diven "#project-button" så ska a-elementet ta bort sin klass och i stället lägga på klassen ".projectbutton-link_hover" (Som förövrigt bara innehåller en annan "color"). När man sedan tar bort muspekaren från musen ska a-elementet igen ärva egenskaperna från a-klassen.

Men detta fungerar inte på så vis att klassen aldrig byts ut, vad jag kan se. Troligtvis för att jag på något vis skriver fel sökvägar på elementen. Eller?

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

## #2 — voigtann1, 2012-01-25T14:41Z

addClass vill ha en sträng på klassnamnet, inte en klass selector

ta bort "." i din sträng.

för just nu kommer a-elementen få:

```
<a href="#" class=".project-button-link_hover"></a>
```

men detta borde du kunna lösa utan jquery (om du inte skall ha stöd för äldre webbläsare som inte klarar av :hover på annat än på a-element).

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

## #3 — saturday, 2012-01-25T14:50Z

Tack, känner mig som en nolla nu som försökt lösa problemet på alla möjliga vis utom detta. :) Tack tack

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

## #4 — voigtann1, 2012-01-25T15:04Z

```
#project-button:hover a { /* din css, borde fungera i webbläsare IE7 och uppåt */}
```

annars kan du göra ett undantag för \<ie7 så kan du göra att jquery pluginet körs specifikt för IE6 och bara ändra lite i din CSS:

```
#project-button:hover a, #project-button a.hover { /* din css, borde fungera i webbläsare IE7 och uppåt */}
```

och kör jquery koden:

```
// CHANGE CLASS ON HOVER
$("#project-button").hover(function(){
   $("a", this).toggleClass("hover");
});
```

 borde nog räcka ;)

eller ännu bättre kanske:

```
// CHANGE CLASS ON HOVER
$("#project-button").hover(function(){
   $(this).toggleClass("hover");
});
```

med css:

```
#project-button:hover a, #project-button.hover a { /* din css, borde fungera i webbläsare IE7 och uppåt */}
```

för det är ju project-button som är hover ;)

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/189038-byt-class-på-ett-a-element-inom-ett-div-element