✔ Simple mouseover function

[Darian]

Hallo Leute,

ich weiß, ist eine simple Frage, und ich bin sicher jemand kann mir hier kurz sagen wie das geht.

Seht folgenden Code:

        <div id="testtext" class="services_projekt" onmouseover="javascript:serviceMouseOver(this)" onmouseout="javascript:serviceMouseOut(this)">
            <img src="../fotos/services.jpg" width="134" height="122" />
            <div class="services_menu">::: testtext</div>

Eine div-Box umschliesst ein Bild und einen darunter befindlichen Button bzw. Div Box.
Wenn ich jetzt über einen der beiden fahre, möcht ich gerne css Infos des Buttons wechseln.

Ich arbeite mit jquery, und hoffe schon dass es irgendwie allgemein geht, und ich nicht immer einen String übergeben muss. (habe leider noch fast nicht damit gearbeitet, und mich bis jetzt eher allgemein aus JS/Ajax/jQuery raus gehalten.

Bin von Flex verwöhnt: Da würde ich einfach das zweite child des übergeben Objekts ansprechen (wäre dann ja die div-Box), und dort das css ändern?

Denke das geht auch hier irgendwie so...

lg und thx für eventuelle Infos
Darian

 

[kuddeldaddeldu]

Hi,

sowas kann man mit jQuery eigentlich sehr komfortabel umsetzen. Probier mal folgendes Beispiel aus:

<script type="text/javascript">
$(document).ready(function(){
   $(".services_projekt").mouseover(function () {
      $(this).find('div').css("background", "yellow");
   });
   $(".services_projekt").mouseout(function () {
      $(this).find('div').css("background", "white");
   });
});
</script>
[...]
<div id="testtext" class="services_projekt">
   <img src="../fotos/services.jpg" width="134" height="122" />
   <div class="services_menu">::: testtext</div>
</div>
<div id="testtext_2" class="services_projekt">
   <img src="../fotos/services_2.jpg" width="134" height="122" />
   <div class="services_menu">::: testtext 2</div>
</div>

Das verpasst jedem Div der Klasse "services_projekt" mouseover- und mouseout-Handler, die den Style für darunterliegende Divs ändern. Die Selektoren kannst Du nach Bedarf anpassen. Schau einfach mal in die Doku.

LG

 

[Darian]

Hallo, das ist ja ziemlich cool, kann man also art EventListener wie bei Flex einbauen. Praktische Sache.

Funktioniert auch schon, wenn auch leider nicht so sauber wie ich es gerne hätte.
Der Content wird mit der Ajax gezogen (jquery load Funktion)

Daher muss der js Code auch direkt in diese Seite sein. Ich finde das irgendwie nicht so schön, könnte aber damit leben.

Muss ich also jetzt den js Code immer direkt in den einzelnen Seiten einbauen, oder gibt es da auch Lösungsansätze?

lg Darian

<edit>
Und wie könnte ich folgendes machen:
$("irgendwas").onmouseover(select()); ..eine Funktion übergeben die extern definiert wurde. (da ich sie öfter benutzen möchte)

Hier die Funktion definieren:
function select(eventObject) {
...
}

Habe da schon ein paar Möglichkeiten probiert, erzielte aber noch nicht den erwünschten Effekt.
</edit>

 

[kuddeldaddeldu]

Hi,

Daher muss der js Code auch direkt in diese Seite sein. Ich finde das irgendwie nicht so schön, könnte aber damit leben.

Muss ich also jetzt den js Code immer direkt in den einzelnen Seiten einbauen, oder gibt es da auch Lösungsansätze?

Die load()-Methode kennt einen dritten Paramter callback.

Und wie könnte ich folgendes machen:
$("irgendwas").onmouseover(select()); ..eine Funktion übergeben die extern definiert wurde. (da ich sie öfter benutzen möchte)

$("irgendwas").onmouseover(select());

So führst Du die Funktion direkt aus und bindest das Ergebnis an mouseover. Die Klammern musst Du weglassen, um eine Funktionsreferenz zu übergeben.

LG

 

[Darian]

Hallo,

habe alles dank deinen Infos, und der Docu hinbekommen. Danke für die Infos.

lg Darian