Zmiana koloru diva

Dla specjalistów Webmastering
#1

Witam, pracuje nad stroną internetową, ale nigdy nie miałem styczności z JavaScriptem.

 

Czy mógłby mi ktoś pomóc i napisać skrypt w JS, który po najechaniu na diva “glowny” zmieni kolor na czarny i wróci do tła, który jest ustawiony jako background image ?

Chciałbym też, żeby divy “title” i “treść” zmieniły swoją zawartość na białą czcionkę.

 

Przykład:

<div class="glowny">

<div class="title">
Tytuł
</div>

<div class="tresc">
Treść
</div>

</div>

Proszę o pomoc. Zalezy mi na tym.

 

pozdrawiam.

#2

Do tego powinien wystarczyć w zupełności CSS.

 

Przykładowo:

.glowny {
   background-image;
   background-color;
   font-family;
   font-size;
}

.glowny:hover {
   transition 1s linear;
   background-image;
   background-color;
   font-family;
   font-size;
}
#3

dzięki. a tak z ciekawości jak by to wygladało w JS ?

 

Potrzebuję tego w JAVASCRIPT na zaliczenie do szkoły; /

#4

http://api.jquery.com/css/

#5

Dzięki za link, ale nie miałem styczności z JS i nic mi to nie mówi ; /

#6

masz bez jquery ale tak się JS nie nauczysz

<html>
<body style='background-image: url("http://www.backgroundsy.com/file/large/digital-waves-background.jpg");'>

<div id='aaa' onmouseover=change_color(); onmouseout=change_color();>
	<p id='bbb'>■■■■ JEST BLADA</p>
</div>

<script>

function change_color() {
	var color = document.getElementById("aaa").style.color;
	if (color == "red"){
		document.getElementById("aaa").style.color="black";
	  	document.getElementById("aaa").style.backgroundColor="transparent";
	}            
	else {
                document.getElementById("aaa").style.color="red";
                document.getElementById("aaa").style.backgroundColor="blue";

	}
}

</script>

</body>
</html>
#7

Albo tak:

<!DOCTYPE html>
<html>
    <head>
        <title>Strona</title>
        <meta charset="utf-8">       
    </head>
    <body>
        <div id="glowny">
            <div id="tytul">Tytuł</div>
            <div id="tresc">Treść</div>
        </div>
        <script>
            //glowny
            document.getElementById("glowny").onmouseover = function() { changeBackgroudColor(this,"black"); }
            document.getElementById("glowny").onmouseout = function() { changeBackgroudColor(this,"white"); }            
            //tytul
            document.getElementById("tytul").onmouseover = function() { changeForegroundColor(this,"white"); }
            document.getElementById("tytul").onmouseout = function() { changeForegroundColor(this,"black"); }            
            //tresc
            document.getElementById("tresc").onmouseover = function() { changeForegroundColor(this,"white"); }
            document.getElementById("tresc").onmouseout = function() { changeForegroundColor(this,"black"); }
            
            function changeForegroundColor(obj, color){
                obj.style.color = color;
            }            
            function changeBackgroudColor(obj, color){
                obj.style.backgroundColor = color;
            }
        </script>
    </body>
</html>
#8

wielkie dzięki : ) a co mam zrobić żeby color diva płynnie się zmieniał ?

#9

 

poszukać w google