---
title: "Vill ha olika mouseover i <h1> och <h2>"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/188957-vill-ha-olika-mouseover-i-h1-och-h2"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "Vixnor"
published: "2012-01-07T23:34:05.000Z"
updated: "2012-06-15T10:50:26.000Z"
replies: 20
views: 2092
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/188957-vill-ha-olika-mouseover-i-h1-och-h2"
---

# Vill ha olika mouseover i <h1> och <h2>

_Sida 1 av 2._

## #1 — Vixnor, 2012-01-07T23:34Z

Har testat med a:hover { color: #282821;} i min css-kod och det funkar på alla länkar utom de som är inringade av \<h1\> eller \<h2\>

I min css ser det ut såhär:

```
a:hover { color: #282821;}

h1 { color: #999999; }
h1 { font-size: 30px; }
h1 { font-family: Arial Narrow; }
h1 { font-weight: normal; }
h1 { line-height: 43px; }

h2 { color: #2E3C57; }
h2 { font-size: 30px; }
h2 { font-family: Arial Narrow; }
h2 { font-weight: normal; }
h2 {line-height: 43px; }
```

Jag vill alltså få textfärgen att ändras i \<h1\> och \<h2\>. 
*I mitt html dokument är \<h1\> och \<h2\> länkar.*

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

## #2 — rhdf, 2012-01-08T00:51Z

hmm
din a:hover BORDE påverka länkar i h-taggar med.. dock vet vi ju inte hur din html ser ut...
testa att lägga in en regel för bara a med

alternativet är att lägga in specialregler för a-taggar i tex h1

```
h1 a:hover{color:pink}
```

Sen ser din css lite..hmm.. annorlunda ut. normalt sett så skriver man alla regler för ett element grupperat dvs

```
h1 {
  color: #999; 
  font-size: 30px; 
  font-family: Arial Narrow; 
  font-weight: normal; 
  line-height: 43px;
}
```

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

## #3 — Vixnor, 2012-01-08T13:27Z

Stämmer, är bättre att skriva såhär: utan { runt alla }

```
h1 {color: #999999; 
    font-size: 30px; 
    font-family: Arial Narrow; 
    font-weight: normal; 
    line-height: 43px; 
    }
```

Testade h1 a:hover{color:pink} men det värkar inte funka.
Jag vill iofs ha olika färger till \<h1\> och \<h2\> så det var väll bra att min första a:hover { color: #282821;} inte påverkade innehållet i \<h1\> och \<h2\>

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

## #4 — voigtann1, 2012-01-08T14:04Z

:hover skall fungera på andra element förutom a från IE8, vilken webbläsare är du på när du testar? 

annars är det som rhdf skriver, du måste a det på a-element.

```
h1 a:hover { color:pink; }
```

 för att sätta sätta en rosa färg på ditt a-element inne i ditt h1 element:

```
<h1><a href="....">Vixnor</a></h1>
```

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

## #5 — Vixnor, 2012-01-09T23:01Z

Funkar kanske det gör, men inte som jag hade tänkt mig.
Min html:

```
     <div id="1">
     <h1>
     Länk 1      <!-- (utan länk) strunt i det... -->
     </h1>
     </div>
             <div id="2">
             <h2>
             <a href="länk2.html" >länk 2</a>
             </h2>
             </div>
```

Det funkade när jag flyttade \<h2\> före \<a href\> men då blev länken svart, skall vara blå enligt \<h1\>s css.

CSS:

```
A:link {color: black;}
A:hover {color: yellow;}  /* switches color onmouseover */

h1 {color: blue;}
h1 a:hover {color:pink; }

h2 {color: green;}
h2 a:hover {color: pink; }
```

*Och när det gäller webbläsare använder jag cirka 10 st att prova i.*

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

## #6 — rhdf, 2012-01-09T23:31Z

Ja du har ju sagt att alla länkar skall vara svarta

Det enda du sagt specifikt för länkar i \<h1\> är vilken färg de skall ha vid hover. Vill du ha en avvikande färg i vanliga fall så måste du ha en css-regel för det med
h1 a {color: blue;}
h1 a:hover {color:pink; }

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

## #7 — Vixnor, 2012-01-10T00:17Z

Löste problemet såhär istället:
CSS:

```
a.ex1:link,a.ex1:visited {color:blue;text-decoration: none;}
a.ex1:hover,a.ex1:active {color:green;}
```

HTML:

```
			<div>
			  <a class="ex1" href="2.html" >
			  länk 2
			  </a>
			</div>
```

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

## #8 — voigtann1, 2012-01-10T06:14Z

<http://jsfiddle.net/zV85R/>

fungera för mig i de flesta webbläsarna (ie8+)

ett id få aldrig börja med ett tal så du vet det.

**a:link** har ett högre värde än vad **h2 a** har och :link behöver du inte på ett a-element.

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

## #9 — Vixnor, 2012-01-12T15:58Z

Jag hade tänkt använda class som jag skrev i inlägget innan.  (funkar)
Jag lyckas inte få bort "link" 

```
a.ex1:link,a.ex1:visited {color:blue;text-decoration: none;}
```

 (kanske inte spelar någon roll) eller kanske bara användbart med \<h1\>, \<h2\> etc...

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

## #10 — voigtann1, 2012-01-12T16:00Z

:link känns helt överflödig då a-element är en länk.

Du behöver ju inte använda klasser om du inte behöver det.

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

## #11 — Vixnor, 2012-01-12T16:31Z

Jag har tagit bort mina \<h1\> \<h2\> \<h3\> och istället ersatt den informationen till mina \<div\>.

Nu ser min CSS ut såhär:

```
div#texter  {
width: 200px;
font-size: 10px; 
color: black;
}
```

Men jag skulle behöva lägga in detta till \<div\>:

```
a.ex3:link,a.ex3:visited {color:black;text-decoration: none;}
a.ex3:hover,a.ex3:active {color:#yellow;}
```

så jag slipper använda classer i länkarna i texterna.

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

## #12 — voigtann1, 2012-01-12T17:01Z

hur ser din HTML markup ut då?

diven måste ha ett id som heter texter och endast en div få ha det som ID.
men varför skall a-elementet ha en klass finns det någon anledning till det?

```
div#texter a.ex3, div#texter a.ex3:visited {color:black;text-decoration: none;}
div#texter a.ex3:hover,div#texter a.ex3:active {color:#yellow;}
```

skriver du.

eller med lite struktur:

```
div#texter a.ex3,
div#texter a.ex3:visited {
	color:black;
	text-decoration: none;
}

div#texter a.ex3:hover,
div#texter a.ex3:active {
	color:#yellow;
}
```

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

## #13 — Vixnor, 2012-01-12T18:02Z

Det var inte så jag menade, utan jag menade att jag ville bli av med classerna helt och skriva in a:visited etc. i div#texter {...}

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

## #14 — voigtann1, 2012-01-12T18:16Z

igen, postar din HTML kod så vi förstå vad du har gjort och inte gjort

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

## #15 — Vixnor, 2012-01-12T19:37Z

css:

```
       a.ex3:link,
       a.ex3:visited {color:black; text-decoration: none;}
       a.ex3:hover,
       a.ex3:active {color:#yellow;}

div#texter {
            width: 200px;
            font-size: 10px; 
            color: black;
            }
```

     

```
	      <div id="texter">
		  text text
		  <a class="ex3" href="länken.html" >
		  text text
		  </a>
		  text text
		  <br>
		  text text
		  <a class="ex3" href="länken2.html" >
		  text te
		  </a> 
		  xt 
		  text text
	      </div>
```

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

## #16 — voigtann1, 2012-01-12T19:49Z

yellow är en färg inte en hex #yellow skall vara yellow, fortfarande : link är överflödigt.

eller #ff0 om du vill göra det korta ;)

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

## #17 — Danne V, 2012-01-12T20:26Z

Du kan även skrota "active" som är en relik från förr och i praktiken inte gör ett dugg mer än förvirrar en del som bl.a. förväxlar den med hover.

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

## #18 — Vixnor, 2012-01-23T18:04Z

Men jag fick inget svar på min sista fråga?

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

## #19 — voigtann1, 2012-01-23T18:07Z

läst mitt inlägg ens?

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

## #20 — Vixnor, 2012-06-15T10:41Z

> **[voigtann1 skrev:](https://www.webforum.nu/p/1544895)**
>
> ett id få aldrig börja med ett tal så du vet det.

Ok, men en class då, får den börja med ett tal, eller får de innehålla tal överhuvudtaget, id/class, eller bara inte börja med det?

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/188957-vill-ha-olika-mouseover-i-h1-och-h2  
Nästa sida: https://www.webforum.nu/amne/html-css/188957-vill-ha-olika-mouseover-i-h1-och-h2/page2.md