R.Cheese: Hover-Effekt für nicht zusammenstehende Wörter einer Klasse

SELF-Forum

Hover-Effekt für nicht zusammenstehende Wörter einer Klasse

R.Cheese
– Informationen zu den Bewertungsregeln

Hallo!
Ich suche eine Möglichkeit mehrere Elemente gleichzeitig (z.B. die Subjekte in einem Satz) mit einem Mouseover zu verändern (z.b. die bgcolor).

Beispiel:
wir haben den Satz "Der Hund jagt die Katze im Haus".
Wenn man jetzt mit der Maus über "Katze" fährt, soll sich bei allen 3 Substantiven die bgcolor ändern, das gleiche für Artikel usw..

Mit CSS alleine ist das wohl leider nicht zu realisieren, dort kann man ja immer nur das aktuell überfahrene Element verändern.
irgendwie muss man wohl bei einem mouseover die klasse eines wortes auslesen, alle Elemente der gleichen Klasse finden und die CSS-Eigenschaft ändern.

fällt jemanden eine Lösung mit Javascript+CSS oder vllt auch etwas anderem ein?

Kompabilität zu älternen Browsern oder so ist mir nicht wichtig, da das ganze nicht im internet veröffentlicht, sondern zu präsentationszwecken verwendet werden soll.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hover-Effekt für nicht zusammenstehende Wörter einer Klasse

    Gunnar Bittersmann Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    @@R.Cheese:

    z.B. die Subjekte in einem Satz

    ?? Ein Satz hat doch doch nur ein Subjekt.

    irgendwie muss man wohl bei einem mouseover die klasse eines wortes auslesen, alle Elemente der gleichen Klasse finden und die CSS-Eigenschaft ändern.

    Ja, wobei man alle Elemente der gleichen Klasse zu finden CSS überlassen kann – der Nachfahrenselektor existiert.

      
<p>  
  <span class="Artikel">Der</span>  
  <span class="Substantiv">Hund</span>  
  <span class="Verb">jagt</span>  
  <span class="Artikel">die</span>  
  <span class="Substantiv">Katze</span>  
  <span class="Präposition Artikel">im</span>  
  <span class="Substantiv">Haus</span>  
</p>

    Mit JavaScript gibst du dem 'p'-Element beim Mouseover über einen Artikel die Klasse "hoverArtikel", beim Mouseout entfernst du sie. Analog für die anderen Wortarten.

    Im Stylesheet steht:

    .hoverArtikel .Artikel {background-color: yellow}  
.hoverSubstantiv .Substantiv {background-color: green}

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Hover-Effekt für nicht zusammenstehende Wörter einer Klasse

      R.Cheese
      – Informationen zu den Bewertungsregeln

      vielen dank für die antwort - ich meinte natürlich substantive und nicht subjekte.

      Mit JavaScript gibst du dem 'p'-Element beim Mouseover über einen Artikel die Klasse "hoverArtikel", beim Mouseout entfernst du sie. Analog für die anderen Wortarten.

      ich bin noch anfänger was diese sachen angeht ;)
      könnte mir jemand ein beispiel oder ein link zu einem entsprechenden javascript geben? :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Hover-Effekt für nicht zusammenstehende Wörter einer Klasse

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@R.Cheese:

        könnte mir jemand ein beispiel oder ein link zu einem entsprechenden javascript geben? :)

        Na gut. Aber nur, weil du es schon selbst hinbekommen hast, dass es funktioniert.

        Wie hast du es gemacht? Event-Handler für jedes 'span'-Element?

        Höhere Schule ist es, _einen_ Handler für mouseover und _einen_ für mouseout zu vergeben, und zwar für ein allen 'span' übergeordnetes Element, hier also für das 'p'.

        Entgegen meines vorherigen Postings verzichten wir bei den Klassennamen für das 'p' auf das Präfix "hover" und vergeben dieselben Klassennamen wie den jeweiligen 'span'-Elementen.

        Sieht dann so aus:

        wortarten.html:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>TEST: Wortarten</title>  
        <link rel="stylesheet" type="text/css" href="wortarten.css"/>  
    </head>  
    <body>  
        <p id="satz">  
            <span class="Artikel">Der</span>  
            <span class="Substantiv">Hund</span>  
            <span class="Verb">jagt</span>  
            <span class="Artikel">die</span>  
            <span class="Substantiv">Katze</span>  
            <span class="Präposition Artikel">im</span>  
            <span class="Substantiv">Haus</span>.  
        </p>  
        <script type="text/javascript" src="wortarten.js"></script>  
    </body>  
</html>

        wortarten.css:

        @charset "UTF-8";  
  
.Artikel .Artikel  
{  
    background-color: yellow;  
}  
  
.Substantiv .Substantiv  
{  
    background-color: green;  
}  
  
.Verb .Verb  
{  
    background-color: red;  
}  
  
.Präposition .Präposition  
{  
    background-color: blue;  
}

        wortarten.js:

        var satz = document.getElementById("satz");  
if (satz.addEventListener) // non-IE  
{  
    satz.addEventListener("mouseover", setHighlighting, false);  
    satz.addEventListener("mouseout", resetHighlighting, false);  
}  
else if (satz.attachEvent) // IE  
{  
    satz.attachEvent("onmouseover", setHighlighting);  
    satz.attachEvent("onmouseout", resetHighlighting);  
}  
  
function setHighlighting(event)  
{  
    var target = event.target || event.srcElement;  
    satz.className = target.className; // gibt p[@id="satz"] die Klasse des span-Elements, das den mouseover-Event auslöste  
}  
  
function resetHighlighting()  
{  
    satz.className = ""; // löscht die Klasse von p[@id="satz"] bei mouseout  
}

        Live long and prosper,
        Gunnar

        PS: Tricky ist die Behandlung des „im“, was eine Zusammensetzung aus Präposition und Artikel ist.

        --
        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Hover-Effekt für nicht zusammenstehende Wörter einer Klasse

    R.Cheese
    – Informationen zu den Bewertungsregeln

    Danke an die Helfer,
    habe es jetzt soweit, dass es funktioniert! :)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln