lycoos
Hallo,
ich habe nun folgenden Code gefunden/gemacht.
Dort wird ein einfacher Hovererzeugt. Wenn ich nun über den oberen Hover fahre wird der untere Link nach unten verschoben. Wie kann man das verhindern?
Hier einmal der Code.
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
body
{
background: #e8e7e3;
margin-left: 10%;
font-size: 0.8em;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
a
{
color: #b3655a;
text-decoration:none;
background: #f6f6f6;
}
a:hover
{
background: none;
color: #666;
}
h1
{
color: #53B1FF;
margin: 1em 0;
padding: 0;
font-size: 2em;
text-align: left;
}
h1 span
{
font-size: 1.1em;
color: #34537c;
}
h2
{
color: #B3655A;
margin: 0.5em 0;
font-size: 1.2em;
}
#container {
width: 250px;
}
#container a {
color: #000;
text-decoration: none;
}
#container a .box {
display: none;
}
#container a:hover .box {
width: 200px;
display: block;
border: 1px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h1><span><</span> Textbox bei Hover <span>></span></h1>
<p><a title="Javascript sollte aktiviert sein." href="javascript:history.back();"><< Zurück</a></p>
<div id="container">
<a href="#">Dein Hover-Link <span class="box">Der Text der beim Hover <br/> <br />angezeigt werden soll!</span></a>
</div>
<br/>
<div id="container">
<a href="#">test <span class="box">Der Text der beim Hover angezeigt werden soll!</span></a>
</div>
</body>
</html> |
|
Und hier einmal eine Livedemo.
http://wbbuser.ready2find.de/test/test.html
mfg
lycoos
Delle
Gib deinem container mal eine feste Höhe (Weite ist ja schon eingestellt), und zwar so, dass der Link und die Einblendung locker reinpassen. Musst zur Not ein bißchen mit der Höhenangabe spielen bis es passt. Denn sonst wird ein Auto-Wert eingesetzt, der sich der jeweils aktuellen Höhe anpasst - somit wird diese Höhe beim Einblenden des Kästchens größer und die Position für den unteren Link verändert.
Schweinebacke
So wie du das vorhast klappt das nicht.
Der untere Text wird immer weggedrückt. Das geht nur dann, wenn dem einen eine feste Position auf der unteren Ebene und dem anderen eine angehängte Position auf der nächsten Ebene gegeben wird.
Muster:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
body
{
background: #e8e7e3;
margin-left: 10%;
font-size: 0.8em;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
a
{
color: #b3655a;
text-decoration:none;
background: #f6f6f6;
}
a:hover
{
background: none;
color: #666;
}
h1
{
color: #53B1FF;
margin: 1em 0;
padding: 0;
font-size: 2em;
text-align: left;
}
h1 span
{
font-size: 1.1em;
color: #34537c;
}
h2
{
color: #B3655A;
margin: 0.5em 0;
font-size: 1.2em;
}
#container {
width: 250px;
position:absolute; top:100px; left:150px; z-index:1;
}
#container a {
color: #000;
text-decoration: none;
}
#container a .box {
display: none;
position:relative; top:5px; left:5px; z-index:2;
background: #f6f6f6;
}
#container a:hover .box {
width: 200px;
display: block;
border: 1px dashed #000;
margin-left: 5px;
}
</style>
</head>
<body>
<h1><span><</span> Textbox bei Hover <span>></span></h1>
<p><a title="Javascript sollte aktiviert sein." href="javascript:history.back();"><< Zurück</a></p>
<div id="container">
<a href="#">Dein Hover-Link <span class="box">Der Text der beim Hover <br/> <br />angezeigt werden soll!</span></a>
</div>
<p>Text Text Text Text Text Text</p>
</body>
</html> |
|
Schau dir den Anhang mal an. Das wird wahrscheinlich das sein.
Delle
Ich hab's nun selbst mal ausprobiert. Wenn ich dem container z.B. eine Höhe von 60px gebe, kommt das mit dem Platz hin und es bewegt sich außer dem Einblenden des Hover-Textes nichts. Allerdings ist nun natürlich der Nachteil, dass der zweite Link so, ohne dass man mit der Maus drüber geht, halt ziemlich weit tiefer steht. Aber es funzt theoretisch auch
.
Die Lösung mit den Ebenen ist für die Normal-Anordnung natürlich hübscher, allerdings liegt dann so meist der Hover-Text über dem nächsten Link. Und es ist ein wenig komplizierter
.
Also wie's beliebt und benötigt wird - einfach ausprobieren.
lycoos
@Schweinebacke. Die Idee ist gut. Das Problem ist das ich mit PHP und Templates eine Liste machen. Und für jeden Listeneintrag ein unterschiedlicher Hovereffekt gebraucht wird. Ich habe über 1200 Einträge in dieser Liste.... das wäre sehr mühevoll....
Schweinebacke
Ich habe da nicht alle Versionen mehr griffbereit, aber das läst sich mit JavaScript besser lösen als mit CSS.
Hier noch ein
Beispiel, da wird der Text aus dem bestehenden Quelltext ausgelesen und da den Mauszeiger gehängt.
lycoos
Hm k danke das hilft weiter.....