---
title: "Css-hover stannar hovered i Safari"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/192781-css-hover-stannar-hovered-i-safari"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "bassebhu"
published: "2015-09-24T17:38:16.000Z"
updated: "2015-11-18T08:08:49.000Z"
replies: 13
views: 3212
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/192781-css-hover-stannar-hovered-i-safari"
---

# Css-hover stannar hovered i Safari

## #1 — bassebhu, 2015-09-24T17:38Z

Hej alla glada!

Jag kör en enkel tr:hover så att rader får en annan bakgrund i min tabell när musen för över dem. När man klickar på en cell så öppnas en flytande div med val som går nedanför tabellraden (javascript). När man klickar på ett av valen så försvinner diven igen. Men musepekaren befinner sig nu inte längre på raden såklart. Buggen är att raden fortfarande har hover-bakgrunden och enda sättet att få bort den är att föra muspekaren över den igen. Det är bara Safari som agerar såhär. Är det något i css eller i värsta fall javascript/jquery som kan göra att när diven försvinner så försvinner alla hovers från tabellraderna?

Jag vill helst undvika att ändra hovern från css till javascript. Sådan enkel sak, men buggigt.

Idéer? Tack!  :)

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

## #2 — prplxr, 2015-09-25T07:03Z

Kan vi få lite kod? Kanske en jsFiddle? :-)

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

## #3 — bassebhu, 2015-09-25T07:17Z

Har inget tillgängligt men det är mycket enkelt.

css:

```
tr:hover {
  background: blue;
}
```

Hovern försvinner inte av sig själv, utan man måste rulla över den igen, vilket i det här fallet lämnar en mängd blåmarkerade rader.

När man klickar på en td laddas en div in i cellen via jquery med position absolute så att den flyter nedanför cellen. När man klickar på en knapp i diven så tas diven bort igen med jquery. Hela tiden är raden blåmarkerad och när diven försvinner så är muspekaren alltså inte längre hovrande på tr-raden, men ändå syns den som blåmarkerad i Safari. Det kanske skulle kunna lösas genom att inte ladda in diven i tabellcellen utan utanför, men det borde gå att lösas.

Idéer? tack!

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

## #4 — prplxr, 2015-09-25T12:03Z

Det är ju svårt att säga vad exakt det är som gör att webbläsaren inte känner av att du inte längre hovrar över tr'en. Kan du inte lägga upp hela sidan med all kod på jsFiddle så kan vi andra också testa koden lite?

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

## #5 — bassebhu, 2015-09-29T03:25Z

Ok, nu har jag fulat ihop en jsfiddle! (Bortse från att man kan trycka på Öppna oändligt antal gånger. Det kan man inte i mitt riktiga exempel, men är irrelevant här)...

<http://jsfiddle.net/69sx7p1c/3/>

Testa i Safari och se hur tr fortsätter att vara blå efter att man klickat Stäng. I Chrome och Firefox så försvinner hovern när man stänger.

Idéer på hur jag kan göra Safari glad?

Tack!

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

## #6 — bassebhu, 2015-10-14T18:35Z

Idéer? Tack!

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

## #7 — voigtann1, 2015-10-14T19:20Z

Vilken safari pratar du om? IOS, Mac eller PC?

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

## #8 — bassebhu, 2015-10-14T19:39Z

Mac!

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

## #9 — Danne V, 2015-10-14T20:25Z

1\. Hover på andra element än \<a\> funkar ofta dåligt (eller inte alls) om man inte har html5 som DTD. Alltså, har du \<!DOCTYPE html\>?

2\. Rows (vafan heter det på svenska? Rader?) har dåligt stöd för hover i många webbläsare, generellt sett. Så har det "alltid" varit. Jag har ofta löst det med att inte ha hover direkt på tr, utan genom att kombinera det med dess child:

```
tr:hover td {
background-color: #ccc;
}
```

3\. Ibland spricker det om syntaxen i filen inte är 100% perfekt. Webbläsare är ju numer ganska förlåtande om man glömt stänga en tagg osv. Men när det gäller sånt här så är min erfarenhet att det skiter sig om det finns minsta fel i koden någonstans.

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

## #10 — bassebhu, 2015-10-16T00:52Z

Har html5 och syntaxen är som i fiddlern. Idéer? Tack!

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

## #11 — Danne V, 2015-10-19T16:17Z

> **[bassebhu skrev:](https://www.webforum.nu/p/1573506)**
>
> Har html5 och syntaxen är som i fiddlern. Idéer? Tack!

Testade fiddlern med Safari 6.2.8 på Mac 10.8.5. Med endast tr:hover i stilmallen verkade inte webbläsaren riktigt fatta (bl.a. fick jag TVÅ "öppna" ovanpå varandra).

Med tr:hover td verkade Safari fatta bättre.

Har du testat det själv i skarpt läge?

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

## #12 — bassebhu, 2015-10-19T17:39Z

Här får jag samma resultat med tr:hover td i Safari 9.0

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

## #13 — bassebhu, 2015-11-17T21:05Z

Idéer?  :)  Tack!

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

## #14 — Mr T, 2015-11-18T08:08Z

Ditt exempel funkar som det ska (Öppna blir vitt när man klickar på stäng) i Goggle Chrom (Version 46.0.2490.86 (64-bit) ) och Safari (Version 5.1.10 ) på min gamla mac.

 Var länge sedan man höll på med detta, men kan du inte när man klickar stäng sätta bakgrunden till vit på öppna ?

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/192781-css-hover-stannar-hovered-i-safari
