Mit CSS mouse over machen

Status
Nicht offen für weitere Antworten.
N

napsi

Erfahrenes Mitglied
Guten Morgen!

Ich habe eine unsort. Liste:


HTML: 
<ul>
<li>Gusseisen mit Lamellengraphit (Grauguß)</li>
<li>Gusseisen mit Kugelgraphit (Sphäroguß)</li>
<li>Stahlguss</li>
<li>Aluminium</li>
<li>Bronze</li>
<li>Rotguß</li>
<li>Messing</li>
<li>Schmiedeteile und Presslinge aus Messing</li>
<li>Druckgussteile aus Zink und Aluminium</li></ul>

Nun will ich aber ein <span> anbinden, welches auf einer anderen stelle der Steite einen Text darstellt.

Nun habe ich zwar was gefunden, was das kann, jedoch funktioniert das nur, wenn hinter der <li> ein <a href"#"> befindet. Geht der <span> Befehl auch bei statischem Text?

Bitte um Hilfe

lg.

Napsi
 
Hi,

die modernen Browser unterstützen die allgemeine :hover-Pseudoklasse, die sich auf jedes HTML-Element anwenden lässt - in deinem Fall li:hover.
 
Ich reiche mal ein kleines Beispiel nach:

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_napsi</title>

<style type="text/css">
<!--
ul li span {
display:none;
}

ul li:hover span {
display:block;
position:absolute;
right:10px;
top:50px;
background:yellow;
font-weight:bold;
}
-->
</style>

</head>
<body>

<ul>
    <li>Gusseisen mit Lamellengraphit (Grauguß)<span>Blindtext 1</span></li>
    <li>Gusseisen mit Kugelgraphit (Sphäroguß)<span>Blindtext 2</span></li>
    <li>Stahlguss<span>Blindtext 3</span></li>
    <li>Aluminium<span>Blindtext 4</span></li>
    <li>Bronze<span>Blindtext 5</span></li>
    <li>Rotguß<span>Blindtext 6</span></li>
    <li>Messing<span>Blindtext 7</span></li>
    <li>Schmiedeteile und Presslinge aus Messing<span>Blindtext 8</span></li>
    <li>Druckgussteile aus Zink und Aluminium<span>Blindtext 9</span></li>
</ul>

</body>
</html>
 
Funktiert leider nicht so, wie ich es dachte

HTML: 
<ul>
<li>Gusseisen mit Lamellengraphit (Grauguß) <span class="info">EN-GJL - 150 <br>EN-GJL - 200<br>EN-GJL - 220<br>EN-GJL - 250<br>EN-GJL - 300</span></li>
<li>Gusseisen mit Kugelgraphit (Sphäroguß) <span class="info">EN-GJS - 400<br>EN-GJS - 500<br>EN-GJS - 600<br>EN-GJS - 700</span></li>
<li>Stahlguss <span>1.4729<br>1.4776<br>1.4823<br>1.4848<br>Weitere Qualitäten auf Anfrage</span></li>
<li>Aluminium <span></span></li>
<li>Bronze</li>
<li>Rotguß</li>
<li>Messing</li>
<li>Schmiedeteile und Presslinge aus Messing</li>
<li>Druckgussteile aus Zink und Aluminium</li></ul>

Code: 
li: hover {
	border: 1px solid;
	display: block;
	padding: 0,4em
	position: absolute;
	left: 80px;
	z-index: auto;
}

was habe ich falsch gemacht?
 
Maik hat gesagt.:
die modernen Browser unterstützen die allgemeine :hover-Pseudoklasse, die sich auf jedes HTML-Element anwenden lässt - in deinem Fall li:hover.
Zum Vergrößern anklicken....
napsi hat gesagt.:
im IE 6.x funkt es nicht. FF und ID 7.x funkt es.
Zum Vergrößern anklicken....
Die Vorgängerversionen des IE7 zählen bekanntlich nicht zu den modernen Browsern und unterstützen die allgemeingültige Pseudoklasse :hover nicht für die übrigen HTML-Elemente, außer a:hover.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück