mit hover anderes Element steuern

[Aelfry]

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:

<nav id="navi">
  <ul>
    <li>
      <a href="">Seite 1</a>
      <div class="navi_border"></div>
    </li>
    <li>
      <a href="">Seite 2</a>
      <div class="navi_border"></div>
    </li>
  </ul>
</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

.navi_border
{
  width: 100%;
  height: 1px;
}
#navi li a:hover .navi_border
{
  background: red;
}

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?

 

[MyBad]

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:

 <nav id="navi">
  <ul>
    <li>
      <a href="">Seite 1</a>
    </li>
    <li>
      <a href="">Seite 2</a>
    </li>
  </ul>
</nav>

#navi li a:hover{
  border-bottom: 1px solid red;
}

 

[Myhar]

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:

nav a:hover + div{ ... }

Hier ein kleiner Überblick über die einzelnen Selektoren, aber wie bereits Eingangs erwähnt: Um eine Trennlinie darzustellen nimm MyBads Lösung.

 

[Aelfry]

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.

Möglich ist es aber, das div anzusprechen, wenn über das a gehovert wird:

nav a:hover + div{ ... }

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

#navi li a:hover + .navi_border
{
  /* ... */
}

danke Myhar

 

[NiAlMa]

AW: mit hover anderes Element steuern

auch das ist kein Problem - hier hilft http://www.colorzilla.com/gradient-editor/ und weiter