Bei DIV Mouseover Textfarbe ändern

[Cole]

Ich habe zwei divs. Ich hätte gerne das bei Mouseover des ersten div der Text in dem zweiten div die Farbe wechselt.

Folgendes habe ich leider erfolglos versucht:

<script>

$('.hover').mouseover(function() {

  $('.text').css("color","red");

});


$('.hover').mouseout(function() {

  $('.text').css("color","#000");

});

</script>


<div class="hover"></div>

<div><p class="text">lalala</p></div>

[sas86ks]

Doofe Frage: Warum machst du das nicht per CSS?

.divname {

 text-color: #000;

}


.divname:hover {

 text-color: #fff;

}

Glaube so müsste es funktionieren

P.S. Der Text muss natürlich in dem DIV stehen, damit sich was ändert.

Bei dir ist das "hover" DIV ja leer

Bearbeitet 15. April 2014 von sas86ks

[pr0gg3r]

Funktioniert doch: Edit fiddle - JSFiddle

Natürlich muss in deinem Div etwas stehen.

[Cole]

Hi,

das ist ja mein Problem. Der Text, dessen Farbe sich ändern soll, steht in einem anderen DIV. In dem DIV, wo das mouseover hinterlegt ist, ist ein Bild.

Hintergrund: Wenn man mit der Maus über das Bild fährt soll der Text farblich hervorgehoben werden, um zu zeigen das dieser zu dem Bild gehört. Text und Bild sind nicht direkt beieinander.

@pr0gg3r: Merkwürdig. Ich versuch's nochmal.

Bearbeitet 15. April 2014 von Cole

[der_robert]

Mehr braucht es nicht ... allerdings müsst du dafür deine HTML Struktur etwas anpassen.

CSS

.wrapper:hover{

    color: red;

}

HTML

<div class="wrapper">

    <div class="bild">

        <img src="http://placehold.it/350x150">

    </div>

    <p class="text">lalala</p>

</div>

Funktioniert auch wenn es den Block mehrfach gibt -> http://jsfiddle.net/der_robert/FWj3v/

[der_robert]

Mehr braucht es nicht ... allerdings müsst du dafür deine HTML Struktur etwas anpassen.

CSS

.wrapper:hover{

    color: red;

}

HTML

<div class="wrapper">

    <div class="bild">

        <img src="http://placehold.it/350x150">

    </div>

    <p class="text">lalala</p>

</div>

Das funktionniert auch wenn der Block mehrfach vorhanden ist. -> http://jsfiddle.net/der_robert/FWj3v/ Bei deinem js Versuch wirdst du das Problem haben das du mit $(".text")[...] jedes Element ansprichst welches diese Klasse hat. Deswegen müsstest du dafür sorgen das die jquery CSS funktion nur für das nächste Element gilt, dies erreichst du mit .next() Ausgehend vom Element mit der Klasse "hover" sieht das dann so aus: HTML

<div class="hover"><img src="http://placehold.it/350x150" /></div>

<p class="text">lalala</p> <!-- bitte beachte hier das entferte leere div Element -->

JS/jquery (achtung 2.0.1 !!!)

$('.hover').on("mouseover",function() {

  $(this).next('.text').css("color","red");

});


$('.hover').on("mouseout",function() {

  $(this).next('.text').css("color","#000");

});

http://jsfiddle.net/der_robert/T4r6n/

Bearbeitet 23. April 2014 von der_robert