tutorials.de Buch-Aktion 05/2012
Like Tree4Danke
  • 1 Beitrag von Frezl
  • 1 Beitrag von Quaese
  • 1 Beitrag von spicelab
  • 1 Beitrag von spicelab
ERLEDIGT
JA
ANTWORTEN
5
ZUGRIFFE
604
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 09.03.11 21:26 #1
    Trash Trash ist offline Mitglied Brokat
    Registriert seit
    Jan 2002
    Beiträge
    400
    Moin,
    wie bekomme ich es mit CSS hin, dass wenn jemand über das X hovert, die Klasse "test" angezeigt wird?

    Code :
    1

    <div class="cell">X</div><span class="test">test</span>

    Im Moment hat .test die folgenden Eigenschaften:

    Code :
    1
2
3
4
5
6

    .test {
    width: 200px;
    height: 100px;
    background-color: #febab5;
    display: none;
}

    Ich müsste ja nun bei dem hovern display auf "block" setzen und mit position herumspielen. Aber ich muss ja die Eigenschaften von .test verändern, wenn über das X, also über .cell gehovert wird.

    Irgendwie stehe ich grad auf dem Schlauch...

    Danke!
     
    Zitieren Zitieren
  2. 09.03.11 22:58 #2
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    Du musst das Element, das beim Hovern angezeigt wird, innerhalb des hovernden Bereichs einbauen! Das ganze könnte dann so aussehen:

    HTML-Code:
    <div class="cell">X<span class="test">test</span></div>
    Code css:
    1
2
3
4
5
6
7

    .test {
  display:none;
}
 
.cell:hover .test {
  display:block;
}

    Hab das jetzt net getestet, aber so sollte es funktionieren.

    Grüße,
    Frezl

    // Edit: Doch getestet und für gut befunden mit folgendem Doctype:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Geändert von Frezl (09.03.11 um 23:04 Uhr)
    Trash bedankt sich. 
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
  3. 10.03.11 08:52 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    und wenn gewährleistet ist, dass das span-Element mit der Klasse test immer unmittelbarer Nachfolger des Element mit der Klasse cell ist, kann für moderne Browser auch folgendes verwendet werden:
    Code :
    1
2
3
4
5
6
7
8
9
10

    .test{
  width: 200px;
  height: 100px;
  background-color: #febab5;
  display: none;
}
 
.cell:hover + .test{
  display: block;
}
    Ciao
    Quaese
    Trash bedankt sich. 
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  4. 12.03.11 13:52 #4
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von Quaese Beitrag anzeigen
    und wenn gewährleistet ist, dass das span-Element mit der Klasse test immer unmittelbarer Nachfolger des Element mit der Klasse cell ist, kann für moderne Browser auch folgendes verwendet werden:
    Code :
    1
2
3
4
5
6
7
8
9
10

    .test{
  width: 200px;
  height: 100px;
  background-color: #febab5;
  display: none;
}
 
.cell:hover + .test{
  display: block;
}
    Die Umschreibung "unmittelbarer Nachfolger" könnte auch mit "Selektoren für Nachfahren" oder Kind-Selektoren assoziiert und verwechselt werden

    Mit Bezug zur eingangs gezeigten HTML-Struktur sind hier "Selektoren für benachbarte Elemente" gemeint
    Geändert von spicelab (12.03.11 um 14:59 Uhr)
    Trash bedankt sich. 
    Zitieren Zitieren
  5. 12.03.11 14:28 #5
    Trash Trash ist offline Mitglied Brokat
    Registriert seit
    Jan 2002
    Beiträge
    400
    Danke für die Antworten. Was mich wundert ist, dass die Box immer nur nach einem Klick auftaucht, nicht aber beim hovern ?! Wie kann das sein?
     
    Zitieren Zitieren
  6. 12.03.11 14:36 #6
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Zitat Zitat von Trash Beitrag anzeigen
    Was mich wundert ist, dass die Box immer nur nach einem Klick auftaucht, nicht aber beim hovern ?! Wie kann das sein?
    Eine Deklaration der :active-Pseudoklasse anstelle :hover.

    Code css:
    1
2
3

    .cell:active + .test{
  display: block;
}
    Trash bedankt sich. 
    Zitieren Zitieren
« Footer mit dem speziellen Pfiff | Inhalte zentrieren & Wrapper-Begrenzung ändern »

Ähnliche Themen

  1. Div bei hover an bestimmer Stelle anzeigen
    Von alex130 im Forum CSS
    Antworten: 7
    Letzter Beitrag: 23.01.10, 23:10
  2. Hover bei Text Link soll Bild in Div anzeigen
    Von gnuisnotunix im Forum CSS
    Antworten: 7
    Letzter Beitrag: 04.08.09, 19:51
  3. Zusätzliche Eigenschaften im Eigenschaftsbrowser anzeigen
    Von npmd im Forum .NET Web und Kommunikation
    Antworten: 4
    Letzter Beitrag: 08.02.06, 12:54
  4. bei URL:hover text anzeigen?
    Von Sway im Forum CSS
    Antworten: 2
    Letzter Beitrag: 25.07.05, 19:34
  5. bei hover grafik anzeigen?
    Von Precog im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 17.07.03, 10:32