Problem bei Aufzählung

[Superdok]

Hi,
ich habe ein kleines Problem mit einer Aufzählung. Diese soll später so aussehen

Also im nicht hover Zustand lediglich die Lienen zwischen den einzelnen Punken. Im Hover Zustand allerdings ohne die Linen und nur mit der Sprechblase.

Der Code hierzu sieht so aus

<ul id="categories">
      <li><a href="#">Lorem Ipsum</a></li>       
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
      <li><a href="#">Lorem Ipsum</a></li>
    </ul>

#categories li {	
	list-style-type: none;		
}
#categories li a {	
	height: 14px;
	line-height: 12px;
	display:block;
	padding: 5px 0 6px 6px;		
	background-image:url(../images/line.png);
	background-repeat: no-repeat;
	background-position: bottom;	
}
#categories li a:hover {
	
	display:block;		
	background-image:url(../images/cat_bubble.png);
	background-repeat: no-repeat;
	background-position: bottom;	
}

So soweit funktioniert es auch recht gut, bis auf die Linien. Es sieht bei mir also so aus

Also der untere Strich verschwindet, aber der obere Strich nicht, da er zum anderen li Element gehört. Welche Möglichkeiten gibt es für mich beide Striche beim Hover loszuwerden, also auch vom anderen li Element?

 

[Maik]

Hi,

ich wüsste nicht, wie per CSS der "Strich" (das Hintergrundbild) des darüberliegenden Links verschwinden soll, wenn im darunter folgenden Link sein Hintergrundbild getauscht wird.

mfg Maik

 

[Superdok]

Gibt es sonst noch irgendeine andere Möglichkeit dies zu lösen?

 

[Do_0mi]

wie wäre es, das mit JQuery zu lösen?
sollte funktionieren...

 

[Maik]

wie wäre es, das mit JQuery zu lösen?
sollte funktionieren...

Das JS-Framework jQuery wäre dafür noch nicht mal erforderlich, ein kleines Script sollte diesen Job auch erledigen.

mfg Maik

 

[Superdok]

Hm dort kenn ich mich leider nicht aus. ich denke ich muss einen anderen Weg finden

 

[Maik]

Schau mal hier:

<ul id="categories">
      <li><a href="#" id="id1">Lorem Ipsum</a></li>
      <li><a href="#" id="id2" onmouseover="getElementById('id1').style.backgroundImage='none';" onmouseout="getElementById('id1').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id3" onmouseover="getElementById('id2').style.backgroundImage='none';" onmouseout="getElementById('id2').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id4" onmouseover="getElementById('id3').style.backgroundImage='none';" onmouseout="getElementById('id3').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id5" onmouseover="getElementById('id4').style.backgroundImage='none';" onmouseout="getElementById('id4').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
</ul>

mfg Maik

 

[Do_0mi]

@ maik: oder so du bist wirklich nicht schlecht im coden

 

[Superdok]

Leider funktioniert das nicht ganz. beim ersten malö drüberfahren gehts. Aber beim erneuten kommt dann die Sprechblase als Hintergrundbild nimmer (bei Hover).
Bei dem letzen Listenelement funktioniert es auch nach dem ersten mal drüberfahren, bei den anderen Listenelementen aber nicht mehr

 

[Maik]

Hab meinen Code-Schnipsel vorhin nicht näher getestet, sondern frei von der Leber geschrieben

Für diesen speziellen Anwendungsfall entfällt dann im CSS die :hover-Pseudoklasse.

<ul id="categories">
      <li><a href="#" id="id1" onmouseover="this.style.backgroundImage='url(./images/cat_bubble.png)';" onmouseout="this.style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id2" onmouseover="this.style.backgroundImage='url(./images/cat_bubble.png)';getElementById('id1').style.backgroundImage='none';" onmouseout="this.style.backgroundImage='url(./images/line.png)';getElementById('id1').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id3" onmouseover="this.style.backgroundImage='url(./images/cat_bubble.png)';getElementById('id2').style.backgroundImage='none';" onmouseout="this.style.backgroundImage='url(./images/line.png)';getElementById('id2').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id4" onmouseover="this.style.backgroundImage='url(./images/cat_bubble.png)';getElementById('id3').style.backgroundImage='none';" onmouseout="this.style.backgroundImage='url(./images/line.png)';getElementById('id3').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
      <li><a href="#" id="id5" onmouseover="this.style.backgroundImage='url(./images/cat_bubble.png)';getElementById('id4').style.backgroundImage='none';" onmouseout="this.style.backgroundImage='url(./images/line.png)';getElementById('id4').style.backgroundImage='url(./images/line.png)';">Lorem Ipsum</a></li>
</ul>

mfg Maik