Text highlighten mouseover

[Ronald Nickel]

Hallo ann alle CS oder JS Profies

ich benötige einen Tipp für eine kleine Lernhilfe.
Ich suche eine Möglichkeit durch Mouseover über das Wort "Tipp" mehrere Wörter im Text hervorzuheben.

Beispiel:
"Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße." (TIPP)

beim mouseover über das Wort "Tipp" soll der Text das wie folgt aussenhen:

"Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße." (TIPP)


Ähnlich wie wie das 2. Beispiel hier ...

Hat jemand eine Idee wie man das realisieren kann?

Lieben Gruß
Ronny

 

[gregi]

Du hast dir ja die Lösung gleich selber verlinkt.

Was verstehtst du daran nicht?

Hier habe ich dir ein beispiel mit reinem CSS gemacht.
Das funktioniert aber nur wenn du über den text fährst, da es in CSS keinen "parent" Selektor gibt.

http://jsfiddle.net/3yuh85pa/

 

[rem]

ach so. Da leuchtet was anderes auf...

 

[gregi]

QUOTE (rem @ Mi 21.10.2015, 22:57) Geht problemlos in CSS mit einem :hover Selektor.

Das Beispiel mit CSS hab ich bereits verlinkt.
Aber dass bei einem Hover über "TIPP" ein anderes Element hervorgeheben wird ist mit CSS nicht möglich.

 

[rem]

Ja sorry...
Da muss man auf jeden Fall mit JS-Events arbeiten.

 

[gregi]

Hab doch noch eine reine CSS Lösung gefunden.

http://jsfiddle.net/3yuh85pa/2/

 

[rem]

Ich habe ja nichts gegen JQuery. Aber vielleicht können wir das mit stinknormalen JS herleiten:
Ich versuch mal was...

Ich hoffe, dass sich das selbst erklärt.

<button id="blinken" type="button" onmouseover="blinken()" onmouseout="zurueck()">Blinken</button>
<p id="effekt">Hier wird es blinken</p>
<script type="text/javascript">
function blinken() {document.getElementById("effekt&quot.style.backgroundColor = "yellow";}
function zurueck() {document.getElementById("effekt&quot.style.backgroundColor = "white";}
</script>


Prinzipiell braucht man zwei JS-Events. Einmal, für den Eintritt der Mousepointers über dem Element (onmouseover) und für das Verlassen (onmouseout). Falls das der Fall ist, werden zwei Funktionen aufgerufen, die dann CSS per JS umbiegen.

Sowas lässt sich gut adaptieren. Für mich ist die Schwierigkeit CSS-Syntax in dieses dusslige JS abzuwandeln. Da muss man halt in Google suchen, bis man alles richtig hat.

Es geht insofern auch in einem Vierzeiler [seltsamerweise schlanker als diese JQuery-Code]. Für die konkrete Anwendung muss man noch das eine oder andere anpassen. Aber why not...

 

[rem]

QUOTE (gregi @ Mi 21.10.2015, 23:13) Hab doch noch eine reine CSS Lösung gefunden.

http://jsfiddle.net/3yuh85pa/2/

Auch cool ;-)
CSS wird ja laufend erweitert. Da muss man ständig die Neuigkeiten checken ;-) LOL

 

[Ronald Nickel]

Hallo gregi
die 2. Lösung ist genau was ich wollte

Vielen Dank
Gruß Ronny

 

[Ronald Nickel]

Mist, es scheint als ob ne andere CSS dazwischen funkt. funktioniert irgendwie nicht.
Habe die CSS von gregi ans ende der Standard-CSS eingefügt

Testseite

 

[gregi]

QUOTE (Ronald Nickel @ Do 22.10.2015, 14:31) Habe die CSS von gregi ans ende der Standard-CSS eingefügt

Nein, hast du nicht

Du hast meinen Code innerhalb der letzten Klammer eingefügt, und diese Steht für die gedruckte Version deiner Website.

Setz einfach die allerletzte Klammer des CSS's über meinem Code.

 

[wurzel]

QUOTE (gregi @ Do 22.10.2015, 00:13) Hab doch noch eine reine CSS Lösung gefunden.

http://jsfiddle.net/3yuh85pa/2/

geil. brauch ich zwar nicht, aber trotzdem gut.

 

[Ronald Nickel]

alles Klar... funktioniert!
Danke gregi

lg Ronny