✔ Javascript: Hovern von Links lässt Texte erscheinen

R

Rayvez

Mitglied
Sers, ich wollte fragen wie ich folgendes realisiere:

Ich habe mehrere Links, beim Hovern von denen soll in einem extra Div jeweils die passende Beschreibung angezeigt werden(bei Mouseout wieder unsichtbar).
 
Hi,

indem die Beschreibungen zunächst mittels CSS versteckt werden (display:none), und beim Überfahren der jeweiligen Links eingeblendet werden (display:block).
 
Das mit den Texten verstecken hab ich auch mit display: none; gelöst, aber wie soll ich es genau bei den Links machen?
 
Na, indem du in den Links mittels der Event-Handler onmouseover und onmouseout die entsprechende JS-Funktion zuzm Ein- und Ausblenden aufrufst.
 
Sag mal, wie gut kennst du dich eigentlich in JS und CSS aus?

Hast du schon mal was von einem ID-Bezeichner gehört?

Jede Beschreibung erhält ihre individuelle ID, über die sie mit dem Script angesprochen wird.
 
Das Ganze könnte dann beispielsweise so lauten:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_Rayvez</title>

<style type="text/css">
#beschreibung1, #beschreibung2, #beschreibung3 {
display:none;
}
</style>

<script type="text/javascript">
function showhide(divid) {
obj = document.getElementById(divid);
obj.style.display = obj.style.display == 'block' ? 'none' : 'block';
}
</script>

</head>
<body>

<ul>
    <li><a href="#" onmouseover="showhide('beschreibung1')" onmouseout="showhide('beschreibung1')">Link 1</a></li>
    <li><a href="#" onmouseover="showhide('beschreibung2')" onmouseout="showhide('beschreibung2')">Link 2</a></li>
    <li><a href="#" onmouseover="showhide('beschreibung3')" onmouseout="showhide('beschreibung3')">Link 3</a></li>
</ul>

<div id="beschreibung">
     <div id="beschreibung1">
          beschreibung 1
     </div>
     <div id="beschreibung2">
          beschreibung 2
     </div>
     <div id="beschreibung3">
          beschreibung 3
     </div>
</div>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück