PNG och mouseover ger blinkningar

Jag har ett litet kosmetiskt problem med mouseover, jag använder onmouseover="document.getElementById('x').style.visibility='visible'" för att få en pratbubbla att hoppa fram när man för pekaren över ett namn i en lista. Problemet är att mouseovern verkar gå dåligt ihop med transparensen i pratbubblan (PNG) vilket medför att pratbubblan blinkar när muspekaren förs över bubblan (som ligger en liten bit in på den <span> som mouseover ligger i). Så när man håller pekaren tillräckligt långt upp på namnen i listan så blinkar bubblan, i vissa fall försvinner den helt.
Jag har nu gjort en kompromiss och flyttat bubblan så högt upp jag kan utan att man tar fel på vilket namn bubblan kommer från. Det mest optimala vore dock om bubblans nedre triangelspets kunde ligga över (den horisontella) mitten på namnet, eller en liten bit ovanför mitten. Som det är nu blir blinkandet olidligt om jag lägger den så långt ner.
http://pong.muffinmilitia.net/pong2/hoverlistbubble.php?id=124

Det kan inte vara så att pratbubblans box hamnar över elementet med onmouseover, vilket i sin tur triggar en onmouseout? Provat att placera den relativt muspekaren?

red. Jag hackade lite och sätter man en border på bubbeldivvarna ser man att det är så det är, bubbeldivven täcker överkanten på spannen några pixlar. Rör man muspekaren i det området flimrar bubblan.

Usch, det där går att göra mycket elegantare.

<ul>
 <li>Clearice <img alt="" src="images/bubbla_icon.gif"> <span class="Clearice">April Fools?</span></li>
 <li>Desilcium</li>
 ...
</ul>

 li span { position:absolute; left:-500cm; width:170px; height:138px; margin:-145px 0 0 -4em; padding:10px 20px 10px 10px; background-image:url(images/bubbla_small_shadow.png); }
 li span::before { content:attr(class) ":"; display:block; font-weight:bold; }
 li:hover span { left:auto; }

För IE6 kan du behöva något litet skript så :hover funkar... (och 'content').

Ja, det var ju precis det jag skrev. :p
Problemet är ju att jag vill att bubblan ska överlappa spannen så att spetsen på triangeln ligger över namnet, inte ovanför det. Så den egentliga frågan är: kan man få spannen att se ut att ligga under bubblan, men mouseover att verka ovanför? Kanske lägga en osynlig div över texten och ha mouseover på den istället?

Och CSS försökte jag med från början, funkade bra i Opera och FF, men naturligtvis inte i IE så jag sket i det.

man kan väl ställa in i vilken ordning objekten ska visas med z-index i css?

Ja, men nu ska bubblan ligga ovanpå texten...
Däremot undrar jag som sagt om jag kan lägga en osynlig div ovanpå texten (och ovanpå bubblan), frågan är ju då hur jag ska få den att täcka hela texten oberoende av hur lång texten är, att sätta en fast width blir inte så snyggt.

Mr. N. skrev:

Ja, men nu ska bubblan ligga ovanpå texten...
Däremot undrar jag som sagt om jag kan lägga en osynlig div ovanpå texten (och ovanpå bubblan), frågan är ju då hur jag ska få den att täcka hela texten oberoende av hur lång texten är, att sätta en fast width blir inte så snyggt.

Jag provade med att använda mig utav 3 lager.
Ett där texten ligger och visas, ett med högre z-index som ligger ovanpå med mouseover-effekten, samt ett tredje lager med samma text som ligger inuti mouseover-lagret (jag använde mig utav span för att slippa positionering då div gillar att byta rad) för att få rätt bredd.
Tyvärr blev resultatet inte så bra, det fungerar fint i Firefox, men IE klarar inte av det då den inte behåller bredden, eller att det underliggande lagret med den visande texten får prioritet.

Men det kanske går att jobba vidare på?

<span style="z-index: 1; position: absolute; Color: yellow; display: block;" onmouseover="alert('test');"><span style="visibility: hidden;">Testtext ovanför</span></span>

<span style="z-index: 0; position: absolute; left: 8px;">Testtext bakom</span>

Jag har pillat ihop en egen lösning genom att lägga en andra kopia av namnet i en div med opacitet 0 (opacity: 0; filter: alpha(opacity=0)). Funkar i FF, Opera och IE.