Anzeige

mit hover anderes Element steuern

mit hover anderes Element steuern | PSD-Tutorials.de

Erstellt von Aelfry, 23.05.2013.

  1. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    mit hover anderes Element steuern
    ich hänge mal wieder an einer Kleinigkeit fest und komme einfach nicht weiter... und zwar möchte ich gerne beim hover-Zustand eines Elements, ein anderes ansprechen.
    Mein Code sieht in etwa so aus:

    HTML:
    1.  
    2. <nav id="navi">
    3.   <ul>
    4.     <li>
    5.       <a href="">Seite 1</a>
    6.       <div class="navi_border"></div>
    7.     </li>
    8.     <li>
    9.       <a href="">Seite 2</a>
    10.       <div class="navi_border"></div>
    11.     </li>
    12.   </ul>
    13. </nav>
    Nun möchte ich gerne beim hover des Links, das div sichtbar machen (z.B. durch setzen einer Hintergrundfarbe).
    Mache ich das so, funktioniert es irgendwie nicht

    HTML:
    1. .navi_border
    2. {
    3.   width: 100%;
    4.   height: 1px;
    5. }
    6. #navi li a:hover .navi_border
    7. {
    8.   background: red;
    9. }
    Schreibe ich bei der zweiten Deklarationen stattdessen ".navi_border:hover" funktioniert es zwar, aber leider (logischerweise) nur, wenn man mit der Maus über dem 1px hohen div ist.

    Hat vielleicht jemand eine Idee, wie ich das Problem lösen kann bzw. wo der Fehler liegt?
     
    #1      
  2. MyBad

    MyBad localhorst

    Dabei seit:
    18.12.2006
    Beiträge:
    1.977
    Geschlecht:
    männlich
    mit hover anderes Element steuern
    AW: mit hover anderes Element steuern

    Verstehe ich es richtig, dass du nur bei "hover" einen Strich unterhalb darstellen möchtest? Wenn ja, dann machst du das vieeeeeeel zu kompliziert. Ein einfacher "border" tut es hier doch auch:

    HTML:
    1.  
    2.  <nav id="navi">
    3.   <ul>
    4.     <li>
    5.       <a href="">Seite 1</a>
    6.     </li>
    7.     <li>
    8.       <a href="">Seite 2</a>
    9.     </li>
    10.   </ul>
    11. </nav>
    12.  
    HTML:
    1.  
    2. #navi li a:hover{
    3.   border-bottom: 1px solid red;
    4. }
    5.  
     
    #2      
  3. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.076
    Geschlecht:
    männlich
    Ort:
    Ö
    mit hover anderes Element steuern
    AW: mit hover anderes Element steuern

    Wenn du wirklich nur einen Rahmen (border) darstellen möchtest, dann verwende auf jeden Fall MyBads Lösung!

    Möglich ist es aber, das div anzusprechen, wenn über das a gehovert wird:
    HTML:
    1.  
    2. nav a:hover + div{ ... }
    3.  
    Hier ein kleiner Überblick über die einzelnen Selektoren, aber wie bereits Eingangs erwähnt: Um eine Trennlinie darzustellen nimm MyBads Lösung.
     
    #3      
  4. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    mit hover anderes Element steuern
    AW: mit hover anderes Element steuern

    ok, ich hätte den Code vermutlich nicht so weit reduzieren sollen:
    meine border-bottom soll nämlich nicht einfarbig sein, sondern einen Verlauf haben.
    gibt da zwar auch einen workaround mit border-image, aber da das nicht von allen Browser unterstützt wird, wollte ich es lieber mit einem div bauen.

    omg, ich wusste es... ein kleines Zeichen hat gefehlt :rolleyes:
    so funktioniert es wunderbar

    HTML:
    1. #navi li a:hover + .navi_border
    2. {
    3.   /* ... */
    4. }
    5.  
    danke Myhar ;)
     
    #4      
  5. NiAlMa

    NiAlMa Nicht mehr ganz neu hier

    Dabei seit:
    10.09.2008
    Beiträge:
    180
    Geschlecht:
    männlich
    Ort:
    Schwabenländle
    Software:
    CC, Lightbox, PSPad, Notepad++
    mit hover anderes Element steuern
    Zuletzt bearbeitet: 26.05.2013
    #5      
x
×
×