Michaela: Farbbalken

Hallo,

würde gerne Text bei Mausberührung mit Farbe unterlegen. Der Farbbalken sollte bei jedem Wort gleich lang sein (also nicht nur so lang, wie das jeweilige Wort ist).

Vielen Dank im Voraus!

  1. Hallo,

    würde gerne Text bei Mausberührung mit Farbe unterlegen.

    Dann musst du diesen Text in ein Blockelement (div oder span) einfassen, diesem eine id zuweisen und dann per javascript und onMouseOver darauf zugreifen.
    Achtung!!!
    1. So wie ich dich verstehe, handelt es sich dabei nicht um Links. Wohl dem Besucher deiner Seite, der das auch gleich merkt, und nicht wild darauf herumklickt und verwundert das Mauskabel prüft.
    2. Du musst per onMouseOut auch wieder "zurückhovern".

    Der Farbbalken sollte bei jedem Wort gleich lang sein (also nicht nur so lang, wie das jeweilige Wort ist).

    Folglich muss das Blockelement div heißen (oder p), denn dieses beschreibt einen ganzen Absatz.

    Gruß aus MeckPomm

    --

    'Glauben kann keine Berge versetzen, aber der Glaube vermag Berge dahin zu stellen, wo noch keine Berge sind.'
    Friedrich Nietzsche
    1. Hello out there!

      Dann musst du diesen Text in ein Blockelement (div oder span) einfassen, diesem eine id zuweisen und dann per javascript und onMouseOver darauf zugreifen.

      So’n Unsinn. Warum sollte dafür JavaScript erforderlich sein?

      Folglich muss das Blockelement div heißen (oder p), denn dieses beschreibt einen ganzen Absatz.

      So’n Unsinn. CSS ist es völlig egal, wie das Element heißt.

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    2. Tach,

      Dann musst du diesen Text in ein Blockelement (div oder span) einfassen, diesem eine id zuweisen und dann per javascript und onMouseOver darauf zugreifen.

      1. span ist standardmäig kein Block-Element.
      2. Statt Javascript wäre es hier wesentlich einfacher und sinnvoller :hover zu nutzen.

      Folglich muss das Blockelement div heißen (oder p), denn dieses beschreibt einen ganzen Absatz.

      div beschreibt keine Absätze sondern Bereiche (division), nur p beschreibt Absätze (paragraph). Hier ist jedoch weder das eine noch das andere gesucht, sondern vermutlich eher etwas wie em, strong oder ähnliches und falls da nichts passendes dabei ist span.

      mfg
      Woodfighter

  2. Hello out there!

    würde gerne Text bei Mausberührung mit Farbe unterlegen. Der Farbbalken sollte bei jedem Wort gleich lang sein (also nicht nur so lang, wie das jeweilige Wort ist).

    Würdest du dich bitte mal genauer ausdrücken? Soll das im Fließtext geschehen (also der farbige Hintergrund evtl. in das nächste Wort hineinragen)? Oder soll es eine Liste mit unter- oder nebeneinanderstehenden Menüpunkten handen?

    Meine Glaskugel sagt zweites. Wo ist das Problem?

    Du gibst den Listitems die gleiche Breite (in em!) abhängig vom längsten   Itemtitel und lässt das a-Element die ganze Box ausfüllen:

    HTML:

    <ul id="nl">  
      <li><a href="foobar">foobar</a></li>  
      <li><a href="baz">baz</a></li>  
    </ul>
    

    Stylesheet:

    #nl li {  
      width: 6em;  
      list-style-type: none;  
    }  
      
    #nl a {  
      display: block;  
      width: 100%;  
    }  
      
    #nl a:hover {  
      background: lime;  
    }
    

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hallo,

      Du gibst den Listitems die gleiche Breite (in em!) abhängig vom längsten   Itemtitel und lässt das a-Element die ganze Box ausfüllen:

      Genau deswegen wollte ich auf javascript hinweisen. Es war nicht ein einziges Mal von einem Link die Rede, sondern von Text!

      Gruß aus MeckPomm

      --

      'Glauben kann keine Berge versetzen, aber der Glaube vermag Berge dahin zu stellen, wo noch keine Berge sind.'
      Friedrich Nietzsche
      1. Hallo,

        Genau deswegen wollte ich auf javascript hinweisen. Es war nicht ein einziges Mal von einem Link die Rede, sondern von Text!

        man :hover

        gruss

        --
        Swiss Army Chainsaw
        Terrorific!
        Given a cow full of milk, should the milk un-cow itself, or should the cow milk itself?
        1. Hallo,

          Genau deswegen wollte ich auf javascript hinweisen. Es war nicht ein einziges Mal von einem Link die Rede, sondern von Text!

          man :hover

          Komisch, dann muss ich wohl blind sein

          Gruß aus MeckPomm

          --

          'Glauben kann keine Berge versetzen, aber der Glaube vermag Berge dahin zu stellen, wo noch keine Berge sind.'
          Friedrich Nietzsche
          1. Hallo,

            Komisch, dann muss ich wohl blind sein

            jupp,

              
              
            <style type="text/css">  
            span.mark {background:blue;}  
            span.mark:hover {background:red;}  
            </style>  
              
            <span class="mark">text</span>  
            
            

            gruss

            p.s. Bitte in einem Browser ausprobieren.

            --
            Swiss Army Chainsaw
            Terrorific!
            Given a cow full of milk, should the milk un-cow itself, or should the cow milk itself?
      2. Hello out there!

        Genau deswegen wollte ich auf javascript hinweisen.

        (1) :hover funktioniert in funktionstüchtigen Browsern nicht nur bei Links.

        Es war nicht ein einziges Mal von einem Link die Rede, sondern von Text!

        (2) Man darf ruhig auch mal in die Glaskugel schauen, was der OP eigentlich meint.

        See ya up the road,
        Gunnar

        --
        “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        1. Hi there,

          (1) :hover funktioniert in funktionstüchtigen Browsern nicht nur bei Links.

          Die aber leider 90% der Anwender nicht verwenden ;(

          1. Hallo.

            (1) :hover funktioniert in funktionstüchtigen Browsern nicht nur bei Links.

            Die aber leider 90% der Anwender nicht verwenden ;(

            Im MSDN sind es vermutlich sogar noch mehr.
            MfG, at