hover skifter farve på en div (og den bliver den farve)

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
skills jokes
Nørd
Nørd
Indlæg: 125
Tilmeldt: 12. sep 2013, 17:03

hover skifter farve på en div (og den bliver den farve)

Indlæg af skills jokes » 31. okt 2013, 18:54

hej,
så jeg ville bare lige for sjov lave et lille spil xD
det jeg gør er at jeg har lavet en div med en masse små diver inden i og så har alle de små diver en border som er sort og deres baggrund farve er grå og det jeg så vil have er at når man tager musen over en af dem og hvis det er den rigtige så skal baggrund farven blive grøn og hvis den er den forkerte skal den blive rød (man starter øverst og man skal ende nederst) men mit problem er dog at jeg vil have at når du har holdt musen over den rigtige bliver den grøn/rød(hvis det er den forkerte)
men så når du flytter musen forbliver baggrunds farven stadig den farve grøn/rød
er der nogle som kan fortælle mig hvordan jeg gør det? :)

tak :D

Brugeravatar
Daniel
Admin
Admin
Indlæg: 625
Tilmeldt: 14. jun 2011, 09:27
Geografisk sted: Danmark, Fyn, Nørre Aaby
Kontakt:

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af Daniel » 1. nov 2013, 00:47

Det lyder til at du skal have fat i noget JavaScript, hvor du ændre på CSS stylingerne ved hover, og så skal farven fastsættes i et if statement.
Hvordan dette if statement skal se ud, afhænger meget af din kode, og er ikke noget jeg lige umiddelbart kan hjælpe med.
Måske kunne du også gøre dette via CSS hover, hvis du kunne tildele de rigtige divs en class og de forkerte en anden, så ville du kunne lave en styling på de to classes med forskellige baggrundsfarver.

Kode: Vælg alt

.right:hover {
    background-color: green;
}
.woring:hover {
    background-color: red;
}

Kode: Vælg alt

<div id="main">
    <div class="wrong"></div>
    <div class="wrong"></div>
    <div class="right"></div>
    <div class="wrong"></div>
    <div class="right"></div>
</div>

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg: 1528
Tilmeldt: 28. dec 2010, 10:49

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af ThomasI » 1. nov 2013, 12:04

Tjek det her ud:

http://www.w3schools.com/jquery/tryit.a ... name_value

Du skal bare bruge det på din div istedet :)

skills jokes
Nørd
Nørd
Indlæg: 125
Tilmeldt: 12. sep 2013, 17:03

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af skills jokes » 1. nov 2013, 17:54

jeg forstår ikke helt det der link du sendte mig, jeg tror nok det er noget php fordi jeg har aldrig prøvet/set nogle guide om php.

men jeg lavede en video som viser mit problem og min kode (koden er også her i beskeden) :)
kan i fortælle mig hvordan jeg bruger den kode du sende mig??

video: http://www.youtube.com/watch?v=ZpoBYC38TuM

kode:

Kode: Vælg alt

<html>
	<head>
		<meta charset="utf-8"/>
		<title>fun</title>
<style type="text/css">
	body{
		background-image:url(baggrund.png);
	}
	#wrap{
		border:0.5px solid black;
		border-right:2px solid black;
		border-bottom: 4px solid black;
		width:800.5px;
		height:800px;
		margin-left:auto;
		margin-right:auto;
	}
	#wrapLn2{
		border:1.5px solid black;
		width:19.62px;
		height:800px;
		float:left;
	}
	#red{
		border:1.5px solid black;
		width:19.62px;
		height:19.62px;
		background-image:url(knap.png);
	}
	#red:hover{
			background-image:url(RødKnap.png);
	}
	#green{
		border:1.5px solid black;
		width:19.62px;
		height:19.62px;
		background-image:url(knap.png);
	}
	#green:hover{
		background-image:url(GrønKnap.png);
	}
	#greenStart{
		border:1.5px solid black;
		width:19.62px;
		height:19.62px;
		background-image:url(GrønKnap.png);
		font-size: 11;
		text-align:center; 
	}
	a{
		text-decoration:none;
		color:black;
	}
	a:hover{
		color:white;
		text-decoration: underline;
	}
</style>
	</head>
	<body>
<div id="wrap">

			<div id="wrapLn2">
							<div id="red"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="green"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>	
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>
							<div id="red"></div>						
			</div>
</div>
tak :D

skills jokes
Nørd
Nørd
Indlæg: 125
Tilmeldt: 12. sep 2013, 17:03

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af skills jokes » 1. nov 2013, 17:56

jeg kunne ikke skrive hele koden fordi en besked kun ("kun" xDD ) må være på 60000 tegn :D
men den bliver bare ved med en lille smule div's til og så slutter den sidste div og så slutter body og så slutter html

tak :D

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af MrLundholm » 1. nov 2013, 22:02

Det er meget simpelt, blot tilføj dette i din header (imellem <head></head>)

Kode: Vælg alt

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('.green').hover(function() {$(this).css("background","green");});
</script>
Og det skulle vist være det :)

Brugeravatar
Daniel
Admin
Admin
Indlæg: 625
Tilmeldt: 14. jun 2011, 09:27
Geografisk sted: Danmark, Fyn, Nørre Aaby
Kontakt:

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af Daniel » 1. nov 2013, 23:31

Har slettet en del af din meget lange kode, er forståeligt nok ud fra det stykke der er tilbage, eller videoen.

En vigtig note til dig, er at man kun "må" bruge et id en gang på en side, så alle dine divs med id="green" og id="red" bør være divs med class="green" og class="red" :)
Det samme med dine divs med id="wrapLn2".

skills jokes
Nørd
Nørd
Indlæg: 125
Tilmeldt: 12. sep 2013, 17:03

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af skills jokes » 1. nov 2013, 23:58

tak daniel, jeg har fixet det så det nu er classes i stedet for id's :D

og MrLundholm jeg prøvede at sætte koden ind i min head men der skete ikke noget :(

tak :D

MrLundholm
Rutineret
Rutineret
Indlæg: 50
Tilmeldt: 20. sep 2013, 15:33
Kontakt:

Re: hover skifter farve på en div (og den bliver den farve)

Indlæg af MrLundholm » 2. nov 2013, 09:17

Prøvet du min kode før eller efter du ændrede det til class?

Besvar