✔ Bild soll bei mouseover Rahmen erhalten

[AndivomBerg]

Grüße Euch,

ich habe ein kleines Problem, bei dem ich auf dem Schlauch stehe:

Ich habe eine Liste mit Links, daneben sind (permanent eingeblendet) Bilder.
Bei mouseover über den Links soll nun das dazugehörige Bild mit einem Rahmen versehen werden. Ich bin mir sicher, dass das geht, nur wie?

Bin für jeden Tipp dankbar!

Viele Grüße,
Andi

 

[Maik]

Hi,

sofern die Grafikelemente Nachfahren der Links sind, funktioniert das so:

a:hover img { border:1px solid red; }

mfg Maik

 

[AndivomBerg]

Danke Dir!
Ich meinte das aber so:

Ich habe eine Liste mit 

<a href="">Link1</a>
<a href="">Link2</a>
<a href="">Link3</a>
<a href="">Link4</a>

Und eine Liste mit Bildern

<a href=""><img src="Bild1.jpg"></a>
<a href=""><img src="Bild2.jpg"></a>
<a href=""><img src="Bild3.jpg"></a>
<a href=""><img src="Bild4.jpg"></a>

Beides ist IMMER sichtbar. Wenn ich nun über den Link1 fahre, soll Bild1 einen Rahmen bekommen.
geht das mit Deiner Lösung?

 

[Maik]

In dieser Konstellation ist es mit CSS nicht möglich, das Grafikelement anzusprechen, dafür ist dann Javascript erforderlich.

<a href="#" onmouseover="document.getElementById('Bild1').style.border='1px solid red';">Link1</a>
<a href="#" onmouseover="document.getElementById('Bild2').style.border='1px solid red';">Link2</a>
<!-- usw. -->

<a href="#"><img src="Bild1.jpg" id="Bild1"></a>
<a href="#"><img src="Bild2.jpg" id="Bild2"></a>
<!-- usw. -->

mfg Maik

 

[Maik]

Ich habe eine Liste mit Links, daneben sind (permanent eingeblendet) Bilder.

Ich meinte das aber so:

Ich habe eine Liste mit 

<a href="">Link1</a>
<a href="">Link2</a>
<a href="">Link3</a>
<a href="">Link4</a>

Und eine Liste mit Bildern

<a href=""><img src="Bild1.jpg"></a>
<a href=""><img src="Bild2.jpg"></a>
<a href=""><img src="Bild3.jpg"></a>
<a href=""><img src="Bild4.jpg"></a>

Beides ist IMMER sichtbar. Wenn ich nun über den Link1 fahre, soll Bild1 einen Rahmen bekommen.
geht das mit Deiner Lösung?

Dann setz es im Markup doch gleich so um:

<ul>
    <li><a href="#">Link1</a><img src="Bild1.jpg"></li>
    <li><a href="#">Link2</a><img src="Bild2.jpg"></li>
    <li><a href="#">Link3</a><img src="Bild3.jpg"></li>
    <li><a href="#">Link4</a><img src="Bild4.jpg"></li>
</ul>

a:hover + img { border:1px solid red; }

Oder eben so:

<ul>
    <li><a href="#">Link1 <img src="Bild1.jpg"></a></li>
    <li><a href="#">Link2 <img src="Bild2.jpg"></a></li>
    <li><a href="#">Link3 <img src="Bild3.jpg"></a></li>
    <li><a href="#">Link4 <img src="Bild4.jpg"></a></li>
</ul>

a:hover img { border:1px solid red; }

mfg Maik

 

[AndivomBerg]

In dieser Konstellation ist es mit CSS nicht möglich, das Grafikelement anzusprechen, dafür ist dann Javascript erforderlich.

<a href="#" onmouseover="document.getElementById('Bild1').style.border='1px solid red';">Link1</a>
<a href="#" onmouseover="document.getElementById('Bild2').style.border='1px solid red';">Link2</a>
<!-- usw. -->

<a href="#"><img src="Bild1.jpg" id="Bild1"></a>
<a href="#"><img src="Bild2.jpg" id="Bild2"></a>
<!-- usw. -->

mfg Maik

Das ist es! Vielen vielen vielen Dank, Du hast mir sehr geholfen!!