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

skills jokes · 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

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>

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 · 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

skills jokes · 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

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

MrLundholm · 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

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 · 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

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

tak

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

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

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

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

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

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

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

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

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

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

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

Office

CMS

Webudvikling

Udvikling

Adobe

Andet

Online Markedsføring

App- og spiludvikling