tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
710
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 30.12.07 16:40 #1
    Magxi Magxi ist offline Grünschnabel
    Registriert seit
    Dec 2007
    Beiträge
    4
    Hallo erstmal.

    Mein Problem ist folgendes : Ich habe rechts einen Link und links eine blaue Box, die sich farblich verändern soll, wenn ich über den Link daneben gehe.
    Ich habe schon einmal angefangen, aber dies klappt leider nicht.

    Ich habe es mal hochgeladen, damit man weiss, was ich meine:

    http://www.malte-becker.de/test.html

    hoffe externe Links sind oke.
    Ansonsten, hab ich es nochmal als Anhang drangehängt

    außerdem hoffe ich, dass mir jemand helfen kann.
    Danke schonmal.

    Edit : keine Ahnung warum der Beitrag ins javascript forum verschoben wurde... weil javascript nicht zum einsatz kommen darf
    Angehängte Dateien Angehängte Dateien
    Geändert von Magxi (30.12.07 um 18:06 Uhr)
     
  2. 30.12.07 18:08 #2
    Maik Tutorials.de Gastzugang
    Hi,

    in dieser Konstellation ist für dein Vorhaben Javascript erforderlich, um das benachbarte Element ansprechen zu können.

    Code :
    1
2
3
4
5
6

    <div id="divBackground">
                <div class="divMenuIcon" id="divMenuIcon1"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon1').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon1').style.background='#cedcee'">Link 1</a></div>
                <div class="divMenuIcon" id="divMenuIcon2"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon2').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon2').style.background='#cedcee'">Link 2</a></div>
                <div class="divMenuIcon" id="divMenuIcon3"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon3').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon3').style.background='#cedcee'">Link 3</a></div>
                <div class="divMenuIcon" id="divMenuIcon4"></div><div class="divMenuTitle"><a href="#" onmouseover="document.getElementById('divMenuIcon4').style.background='#000000'" onmouseout="document.getElementById('divMenuIcon4').style.background='#cedcee'">Link 4</a></div>
</div>
    Zudem muss eine ID in einem Dokument eindeutig sein, und darf daher darin nicht mehrmals vergeben werden. Daher hab ich hier im Quellcode-Auszug die IDs divMenuIcon und divMenuTitle in Klassen umgewandelt, was du im Stylesheet entsprechend abändern musst.
     
  3. 30.12.07 18:13 #3
    Magxi Magxi ist offline Grünschnabel
    Registriert seit
    Dec 2007
    Beiträge
    4
    also kann ich keine benachbarten Elemente ohne Javascript, nur mit css ansprechen ?

    Irgendeine andere Möglichkeit ? Umstellungen ?

    danke
     
  4. 30.12.07 18:47 #4
    Maik Tutorials.de Gastzugang
    Grundsätzlich müsste die Box ein Nachfahreelement des Links sein, um sie mit CSS ansprechen zu können:

    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

    #menu {
width:200px;
}
 
#menu span {
float:right;
width:178px;
height:20px;
background:#cedcee;
}
 
#menu .MenuIcon {
display:inline;
width:20px;
height:20px;
background:#cedcee;
margin-right:2px;
}
 
#menu .menuPoint a:hover {
border:none;
}
 
#menu .menuPoint a:hover .MenuIcon {
background:#000;
}
    Code :
    1
2
3

    <div id="menu">
     <div class="menuPoint"><a href="#"><span>link 1</span><span class="MenuIcon"></span></a></div>
</div>
     
  5. 07.01.08 14:18 #5
    Magxi Magxi ist offline Grünschnabel
    Registriert seit
    Dec 2007
    Beiträge
    4
    hallo, danke das hat mir schonmal sehr weiter geholfen

    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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

    <html>
<head>
    <title>test</title>
    <style type="text/css">
    
 
 
 
 
      p {
            margin-bottom: 2px;
     }
 
    body {
        color: #162953;
        background-color: #EEEFEF;
    }
 
    a {
        text-decoration: none;
            cursor: pointer;
            
    }
 
    #divBackground {
        width: 200px;
        height: 88px;
        background-color: #EEEFEF;
        border: solid 1px #dedede;
        padding-top: 2px;
        padding-left: 2px;
        padding-right: 2px;
    }
 
    #divBackground2 {
        width: 200px;
        height: 66px;
        background-color: #EEEFEF;
        border: solid 1px #dedede;
        padding-top: 2px;
        padding-left: 2px;
        padding-right: 2px;
    }
 
    .menu {
        width:200px;
            
    }
 
    .menu span {
        float:right;
        width:178px;
        height:20px;
        background:#cedcee;
        font-family: Verdana;
        color: #272566;
        font-size: 11px;
        line-height: 20px;
        margin-bottom: 2px;
        text-decoration: none;
            
            
    }
 
    .menu .MenuIcon {
        display:inline;
        width:20px;
        height:20px;
        background:#cedcee;
        margin-right:2px;
    }
 
    .menu .menuPoint a:hover .MenuIcon {
        background:#a4bfe2;
    }
    
    </style>
</head>
<body>
<b><p>&nbsp;Menue1</p></b>
<div id="divBackground">
    
    <div class="menu">
        <div class="menuPoint"><a href="#"><span>&nbsp;Link1</span><span class="MenuIcon">&nbsp;</span></a></div>
        <div class="menuPoint"><a href="#"><span>&nbsp;Link2</span><span class="MenuIcon">&nbsp;</span></a></div>
        <div class="menuPoint"><a href="#"><span>&nbsp;Link3</span><span class="MenuIcon">&nbsp;</span></a></div>
        <div class="menuPoint"><a href="#"><span>&nbsp;Link4</span><span class="MenuIcon">&nbsp;</span></a></div>
    </div>
        
</div>
<p></p>
<b><p>&nbsp;Menue2</p></b>
<div id="divBackground2">
    
    <div class="menu">
        <div class="menuPoint"><a href="#"><span>&nbsp;Link1</span><span class="MenuIcon">&nbsp;</span></a></div>
        <div class="menuPoint"><a href="#"><span>&nbsp;Link2</span><span class="MenuIcon">&nbsp;</span></a></div>
        <div class="menuPoint"><a href="#"><span>&nbsp;Link3</span><span class="MenuIcon">&nbsp;</span></a></div>
    </div>
        
</div>
</body>
</html>


    soweit so gut.. Funktioniert in IE7 und firefox einwandfrei. Aber der IE6 schafft es nicht die Icons zu verfärben...

    Irgendeine Lösung?

    Danke
    Mfg
     
  6. 07.01.08 16:23 #6
    Maik Tutorials.de Gastzugang
    Hi,

    erweiter mal das Stylesheet mit der folgenden Regel, die du aus meinem letzten Beispiel nicht übernommen hast:

    Code :
    1
2
3

    .menu .menuPoint a:hover {
border:none;
}
     
  7. 07.01.08 16:57 #7
    Magxi Magxi ist offline Grünschnabel
    Registriert seit
    Dec 2007
    Beiträge
    4
    danke, super... jetzt funktioniert es !
     
« Ebenen | Wie werden die runden Ecken hier im Forum gemacht? »

Ähnliche Themen

  1. a hover CSS Menü
    Von lol1983 im Forum CSS
    Antworten: 3
    Letzter Beitrag: 06.09.10, 14:45
  2. horizontales Menü hover
    Von tombo82 im Forum CSS
    Antworten: 1
    Letzter Beitrag: 12.11.09, 12:23
  3. Bilder Menü: a:active, a:hover etc...
    Von thetetsuo im Forum CSS
    Antworten: 5
    Letzter Beitrag: 30.01.08, 13:53
  4. Hover Menü und Bild Hover
    Von GFENONO im Forum CSS
    Antworten: 9
    Letzter Beitrag: 05.12.07, 17:18
  5. Hover Menü
    Von fireball-le im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 03.09.03, 19:40