webForumDet fria alternativet

Css-hover stannar hovered i Safari

13 svar · 3 159 visningar · startad av bassebhu

bassebhuMedlem sedan nov. 20016 480 inlägg
#1

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! :)

prplxrMedlem sedan juni 2012582 inlägg
#2

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

bassebhuMedlem sedan nov. 20016 480 inlägg
#3

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!

prplxrMedlem sedan juni 2012582 inlägg
#4

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?

bassebhuMedlem sedan nov. 20016 480 inlägg
#5

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!

bassebhuMedlem sedan nov. 20016 480 inlägg
#6

Idéer? Tack!

voigtann1Medlem sedan juni 20019 519 inlägg
#7

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

bassebhuMedlem sedan nov. 20016 480 inlägg
#8

Mac!

Danne VMedlem sedan aug. 20068 090 inlägg
#9

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.

bassebhuMedlem sedan nov. 20016 480 inlägg
#10

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

Danne VMedlem sedan aug. 20068 090 inlägg
#11

bassebhu skrev:

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?

bassebhuMedlem sedan nov. 20016 480 inlägg
#12

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

bassebhuMedlem sedan nov. 20016 480 inlägg
#13

Idéer? :) Tack!

Mr TMedlem sedan maj 20071 061 inlägg
#14

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 ?

130 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
126 ms — hämta tråd, inlägg och bilagor (db)