Wie ändere ich die Hintergrundfarbe bei jedem Mouseover?

Question

Ich bin ein Anfänger in HTML und CSS, sobald ich dieses Logo auf der Kopfzeile konfrontiert, die Farbe nach jedem mouseover ändert: www.artlebedev.ru. Wie macht man das? Ich habe html-Seite geöffnet und auf dieser Seite css durchgesehen, aber nicht gefunden, wie es gemacht wurde.

Vielen Dank im Voraus!

Answer 1

Verwenden Sie den folgenden Code,

$ ('# Logo') Mouseover (function() { $ (this) .attr ('Stil',. 'Background-color: rgb (' + rand (0255) + ',' + rand (0,255) + ',' + rand (0,255) + ')'); });

Wo Logo-ID des Elements ist, dass Sie Farbe

Answer 2

ändern möchten musste ich etwas freie Zeit, so habe ich beschlossen, Ihnen in dieser Angelegenheit zu helfen. Der gewünschte Effekt verwendet Javascript (es kann nicht nur mit CSS getan werden). Im folgenden Beispiel werden alle Farben zufällig ausgewählt: random()

Die Werte von RGB (rot grün blau) werden nach dem Zufallsprinzip jedes Mal ausgewählt, wenn Sie den Mauszeiger über das div halten. Ihre Kombination ergibt eine zufällige Farbe.

In der Zukunft schlage ich vor, dass Sie suchen und recherchieren, bevor Sie auf SO fragen. Dies sind auch komplizierte Probleme, die nicht für eine css/html beginner geeignet sind. Sie sollten mit einigen Tutorials, Master HTML und CSS starten, schalten Sie dann Javascript und es Bibliotheken, wie JQuery

$("div").mouseover(function() { 
 
    var r = Math.floor(Math.random() * 256); 
 
    var g = Math.floor(Math.random() * 256); 
 
    var b = Math.floor(Math.random() * 256); 
 
    var bckColor = "rgb(" + r + "," + g + "," + b + ")"; 
 
    $(this).css({ 
 
    "background-color": bckColor 
 
    }) 
 
})

div { 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
</div>