Wie funktioniert das richtig? (events)

Hallo!

Bin noch mehr oder weniger ein Anfänger was html und css betrifft.
Und nun habe ich eine frage zu events.

Und zwar möchte ich z.b. wenn ich mit der Maus über ein div gehe, dass sich das Hintergrundbild ändert oder die Hintergrundfarbe oder so.

Das ist mein Quellcode:

<div class="main" style="background-image:url(images/home_image.jpg)" onMouseover="background-image:url(images/videos_image.jpg)" >    
     Hier steht Text
</div>

Wie geht das richtig?

Danke schonmal im Vorraus :slight_smile:

Das ist ganz einfach. :slight_smile:

HTML-Code
[HTML]


Hier steht Text

[/HTML]

CSS-Code

[CODE]
#main {background: url(„http://www.html.de/images/home_image.jpg“);}

#main:hover {background: url(„http://www.html.de/images/home_videos_image.jpg“);}[/CODE]

Du musst bei der URL zu den Bildern das http://www.html.de/ rausnehmen, das wird hier nämlich irgendwie automatisch hinzugefügt. oO

Danke! Hat wunderbar geklappt.

Wie sieht es denn aus mit mh… ich weiß nicht genau wie das genau heißt aber ich nenne es mal verschachtelte events.

Hier der (pseudo-)code:

div.home:hover {
         body{background-color:#123456}
 }

Das soll heißen, dass wenn ich z.b. mit der Maus über ein bestimmtes div gehe, sich der Hintergrund der gesamten Seite anders färben soll.

Ich will so eine art Fotoalbum oder slideshow oder ähnliches machen.

Vielen dank im Vorraus! :stuck_out_tongue:

Der body-Tag kann nicht innerhalb eines

vorkommen. Daher ist dein Beispiel von vornherein falsch.

Wenn Du ineinander verschachtelte Elemente ansprechen willst, schreib es so:

element1 element 2 { eigenschaften}

Beispiel:

li:hover ul { display: block; }

Siehe:
http://www.html.de/css/3750-css-eltern-selektor.html
http://www.html.de/css/34755-verschachtelte-selektoren-vorfahren-selektor-vater-selektor.html

Vielen dank ich habe es ausprobiert und es klappt! :slight_smile:
Mache mich dann mal an die Arbeit!

Oh man… jetzt klappt es doch nicht… zumindest halb.

Das klappt:

#mainphotos {background-image:url(images/photos_image.jpg)} 
#mainphotos:hover div.bottom{background-color:#123345}   

Aber das klappt nicht:

#bild_1:hover div.bottom{background-color:#123345}   

Das bild_1 bezieht sich auf ein Bild das im Bildschirm angezeigt wird:

<img id="bild_1" src="images/1_min.jpg">

Ich will damit bewirken, dass wenn ich mit der Maus über das bild gehe, sich der Hintergrund von dem div.bottom verändert. Geht das etwa nicht mit Bildern?

Ein Bild kann kein Kind-Element haben und somit auch kein Elternelement sein. So kannst Du das folglich nicht schreiben, wird nie funktionieren.

Habe es nun anders probiert und zwar habe ich ein neues Div erzeugt und als Hintergrund das Bild… aber es klappt trotzdem nicht!!!
So… jetzt versuch ichs mal genauer:

Das steht in meinem css-Quellcode:

[CODE]div.bild {
height:67px;
width:100px;
}

#bild_1 {background-image:url(images/1_min.jpg)}

#bild_1:hover div.bottom{background-color: #123456}
[/CODE]

Und das ist mein Html-Quellcode:

[CODE]

Duett Muset Duett Muset
     <div class="main" id="mainphotos">
             <div class="menue" style="background-color: rgba(22,3,116,0.7)">
                     <ul class="navigation">
                             <li class="navi"><a href="home.htm">Home</a></li>
                             <li class="navi"><a href="news.htm">News</a></li>
                             <li class="navi"><a href="about_us.htm">About us</a></li>
                             <li class="aktiv">Photos</li>
                             <li class="navi"><a href="videos.htm">Videos</a></li>
                             <li class="navi"><a href="kontakt.htm">Kontakt</a></li>
                     </ul>
             </div>
             <div class="content" style="background-color: rgba(100,149,237,0.5);">


                <div class="bild" id="bild_1"></div>


             </div>
             <div class="bottom">
             <img src="images/logo.png" style="margin-left: 560px; margin-top: 3px;">
             </div>
     </div>
[/CODE]

Und es klappt einfach nicht :confused:

Du hast scheinbar immer noch nicht das Eltern-Kind-Prinzip verstanden.

Du hast jetzt also folgenden CSS-Code:

[code]#bild_1 {background-image:url(images/1_min.jpg)}

#bild_1:hover div.bottom{background-color: #123456}[/code]

Das setzt voraus, dass Du einen Elemente-Aufbau im HTML hast der so aussieht:

[html]

[/html]

@cesomark: Das was du ereichen willst, geht wunderbar mit jQuery. Füge das mal in den Head ein:

[HTML]

<script type="text/javascript">
  $(function() {
    $('#bild_1').hover(function () {
    $('#bottom').css({"background": "#123456"});
   }) });
</script>

[/HTML]

Mhm… klappt irgendwie nich momo… schau mir im moment Tutorials zu jQuery an… relativ kompliziert^^ java kann ich zwar aber das ist irgendwie schon was andres… mhm mal gucken ob ichs hinbekomm!

Edit: sieht nicht so aus, dass ich es alleine hinbekommen würde… ich sehe meinen Fehler nicht!

Naja schaut euch mal meinen Quellcode selber an: [URL=„http://markceso.ma.funpic.de/MarkC/photos.htm“]http://markceso.ma.funpic.de/MarkC/photos.htm

(N[/URL]ach dem letzten div ist im Quellcode irgend etwas seltsames dass ich nicht selber geschrieben habe… keine Ahnung wo das her kommt.)

Also ich habe es probiert. Wie ich es im ersten Post geschrieben habe funktioniert es, nur das beim „heruntergehen“ von #bild_1 das element #bottom blau bleit. So ist es hoffentlich, wie du es wünscht…

[HTML]

.bottom {background: #ff0000;}
Bild 1
Bottom
[/HTML]

Dein Fehler ist, dass #bottom eigentlih .bottom ist. Ich habe nicht gesehen, dass es eine class ist, sorry :oops:

So wie es oben (post 12) ist, müsste es stimmen.

Es klappt! Danke dir!!! Mhh aber der Fehler hätte auch mir auffallen müssen… oh man^^

Juhu die Gallerie ist fertig und so sieht sie aus wenns dich interessiert momo: [URL=„http://markceso.ma.funpic.de/MarkC/photos.htm“]http://markceso.ma.funpic.de/MarkC/photos.htm

V[/URL]ielen dank! :smiley: