 Hilfe mit Hovereffekt. |
lycoos 
Frauenstimme 2007
Dabei seit: 05.08.05
Beiträge: 1.076
 |
|
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
__________________
mfg
der Lycoos
Der Satz des Pythagoras umfasst 24 Worte,die Zehn Gebote 279, die amerikanische Unabhängigkeitserklärung 300 und die Verordnung der EG über die Einfuhr von Karamelbonbons 25.911 Worte.
|
|
23.09.06 20:46 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
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.
|
|
|
23.09.06 23:06 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Delle
Mitglied
Dabei seit: 12.07.06
Beiträge: 73
|
|
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.
|
|
|
23.09.06 23:15 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
lycoos
Frauenstimme 2007
Dabei seit: 05.08.05
Beiträge: 1.076
Themenstarter 
|
|
@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....
__________________
mfg
der Lycoos
Der Satz des Pythagoras umfasst 24 Worte,die Zehn Gebote 279, die amerikanische Unabhängigkeitserklärung 300 und die Verordnung der EG über die Einfuhr von Karamelbonbons 25.911 Worte.
|
|
|
24.09.06 14:22 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
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.
|
|
|
24.09.06 14:51 |
E-Mail
Finden
Als Freund hinzufügen
|
|
lycoos
Frauenstimme 2007
Dabei seit: 05.08.05
Beiträge: 1.076
Themenstarter
|
|
Hm k danke das hilft weiter.....
__________________
mfg
der Lycoos
Der Satz des Pythagoras umfasst 24 Worte,die Zehn Gebote 279, die amerikanische Unabhängigkeitserklärung 300 und die Verordnung der EG über die Einfuhr von Karamelbonbons 25.911 Worte.
|
|
|
24.09.06 17:05 |
E-Mail
Finden
Als Freund hinzufügen
|
|
|
