hover skifter farve på en div (og den bliver den farve)
-
- Nørd
- Indlæg:125
- Tilmeldt:12. sep 2013, 17:03
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
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
- Daniel
- 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)
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.
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>
Re: hover skifter farve på en div (og den bliver den farve)
Tjek det her ud:
http://www.w3schools.com/jquery/tryit.a ... name_value
Du skal bare bruge det på din div istedet
http://www.w3schools.com/jquery/tryit.a ... name_value
Du skal bare bruge det på din div istedet
-
- Nørd
- Indlæg:125
- Tilmeldt:12. sep 2013, 17:03
Re: hover skifter farve på en div (og den bliver den farve)
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:
tak
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>
-
- Nørd
- Indlæg:125
- Tilmeldt:12. sep 2013, 17:03
Re: hover skifter farve på en div (og den bliver den farve)
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
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
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: hover skifter farve på en div (og den bliver den farve)
Det er meget simpelt, blot tilføj dette i din header (imellem <head></head>)
Og det skulle vist være det
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>
- Daniel
- 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)
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".
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".
-
- Nørd
- Indlæg:125
- Tilmeldt:12. sep 2013, 17:03
Re: hover skifter farve på en div (og den bliver den farve)
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
og MrLundholm jeg prøvede at sætte koden ind i min head men der skete ikke noget
tak
-
- Rutineret
- Indlæg:50
- Tilmeldt:20. sep 2013, 15:33
- Kontakt:
Re: hover skifter farve på en div (og den bliver den farve)
Prøvet du min kode før eller efter du ændrede det til class?