css background in mehreren Teilen

[YoshiGreen]

Aloas,

Ich bin gerade dabei ein kleines Navigationsmenü für 'ne Webseite zu basteln. Das ganze ist recht spartanisch. Die Links liegen auf einem Farbverlauf.
Das aktuelle Element soll gesondert ausgezeichnet werden, genau so wie die anderen, wenn der Cursor über ihnen liegt. In diesem Fall soll der Farbverlauf etwa "wachsen". Siehe hier:


Das Problem ist nun, dass der Übergang doch recht unschön ist. Ich hätte gerne eine Unterbrechung der Linie oder ähnliches.


Ich dachte daran, Pseudo-div Elemente zu platzieren:

Code:

<li>  <div id="pseudoL"></div>   <strong>Übersicht</strong> <div   id="pseudoR"></div> </li>

und denen im stylesheet dann die Übergänge zu zu weisen. (Die Bilder von oben werden also in 3 Teile geteilt.)

Aber wie kriege ich dann den gleichen Effekt beim mouse over hin?

Code:

#head ul a:hover, 
#head ul a:focus, 
#head ul a:active, 
#head ul strong { 
  background: url(img/focusMenu.png) 0px 10px repeat-x; 
}

Ich kann ja lediglich das Link-Element beeinflussen und nicht die benachbarten divs, die nicht von der Maus berührt werden.

Gibt es eine Möglichkeit sowas via CSS zu realisieren?