Søg
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:04 Der er 20 kommentarer og
1 løsning

Style css ved onMouseOver

Er det mulig at styre sin css, ved onMouse-events?

fx:

<style type="text/css">
.test {
    background-color:#FFFFFF;
    width:40px;
    height:40px;   
}           
</style>

<div id="test" class="test"></div>
<div id="test2" class="test" onMouseOver="test.style.background-color: #000000;"></div>

Jeg håber i kan gennemskue ideen.

Hilsen,
Bjarke
Avatar billede nheilbuth Nybegynder
09. februar 2006 - 15:10 #1
Det bør virke. Der skal selvfølgelig en onMouseOut til hvis du skal have den til at skifte tilbage!
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:21 #2
Jeg synes ikke det virker:

http://www.newmusicnet.dk/test.htm
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:22 #3
Jeg har også prøvet med:

.test {
    background-color:#FFFFFF;
    width:40px;
    height:40px;   
    onmouseover: this.background-color:#000000;
}
Avatar billede nheilbuth Nybegynder
09. februar 2006 - 15:29 #4
Dine style tags skal ligge inden for head taggene!
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:31 #5
Det gør ingen forskel:

http://www.newmusicnet.dk/test.htm
Avatar billede keysersoze Ekspert
09. februar 2006 - 15:31 #6
jeg vil ikke umiddelbart mene at man kan ændre en css-klasse gennem javascript - helt sikker er jeg dog ikke men jeg har svært ved at forestille mig at det skulle eksistere problemfrit. Nu ved jeg ikke præcis hvad det skal bruges til men det umiddelbart nok mest brugte er enten at ændre styles direkte på det element man ønsker skal have ændringerne eller ved at have to klasser at skifte imellem på det eller de berørte elementer. Fx;

onmouseover="document.getElementById("noget").style.display = 'block';"
Avatar billede olebole Juniormester
09. februar 2006 - 15:38 #7
<ole>

Det er absolut ikke anbefalelsesværdigt at skifte CSS-klasse, dynamisk. Det sutter big time, hvad performance angår! Du laver en del fejl i dit JavaScript. Sådan skal det se ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.test {
    background-color:#FFFFFF;
    width:40px;
    height:40px;   
}
</style>

</head>
<body>

<div id="test" class="test">lkækælkælk</div>
<div id="test2" class="test" onMouseOver="document.getElementById('test').style.backgroundColor='#000000'">j.k.æjlkjljk</div>

</body>
</html>

/mvh
</bole>
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:38 #8
keysersoze >> jeg havde det også lidt på fornemmelsen. Jeg skal bruge det til, når man kører musen over et billede, skifter et andet billede. Men så må jeg jo bare gøre det på den gode gammeldags måde :o)

onMouseOver="test.src='test.gif';"

og sætte billedet ind mellem mine <div>-tags, og sætte onMouseOver-event på billedet.
Avatar billede nheilbuth Nybegynder
09. februar 2006 - 15:39 #9
Han prøver ikke at ændre en css klasse, men at ændre en attribut på test div'et, men det kan da være at navnesammenfaldet med test giver problemer. Jeg kan godt se det ikke virker, prøver lige at kigge på det!
Avatar billede olebole Juniormester
09. februar 2006 - 15:41 #10
nheilbuth >> Jeg er helt klar over, hvad der spørges om. Min kommentar gik på første sætning i: (09/02-2006 15:31:43) - og resten er vist løst i mit eksempel, hvis du tester det  ;o)
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:42 #11
Så kunne det jo lade sig gøre.. tak Ole. Jeg tager dine ord til eftertragtning.
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:44 #12
Ole >> Ligger du et svar ? :o)
Avatar billede nheilbuth Nybegynder
09. februar 2006 - 15:48 #13
ole >> det var en kommentar til keysersoze 09/02-2006 15:31:43

Hvad er grunden til at det skal være backgroundColor og ikke background-color?
Avatar billede olebole Juniormester
09. februar 2006 - 15:48 #14
Når der er bindstreg i en CSS-property, fjernes den og ordet efter staves med stort, når man sætter/læser den med JS:
  z-index => zIndex
  background-color => backgroundColor
  border-top-width => borderTopWidth

Dernæst skal man i JS bruge '=' - ikke ':' - til at sætte værdien med ... og sluttelig skal værdien være omkranset af gåseøjne, hvis det ikke er et rent tal.

- og til allersidst skal 'adressen' være korrekt. Bruger du 'document.getElementById', virker adresseringen i alle gængse browsere  ;o)
Avatar billede keysersoze Ekspert
09. februar 2006 - 15:49 #15
Ole >> men nu er jeg så lidt i tvivl - mener du at jeg skriver noget forkert eller kommer du med en dybere uddybning af det?
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:49 #16
Ole >> kan du se en fejl her?

onMouseOver="document.getElementById('billede').style.background-image:url('testbillede.jpg');
Avatar billede nheilbuth Nybegynder
09. februar 2006 - 15:50 #17
Tak for forklaringen af bindestregen ole!
Avatar billede musicchart.dk Nybegynder
09. februar 2006 - 15:52 #18
onMouseOver="document.getElementById('billede').style.backgroundImage = 'url(testbillede.jpg)';"

Sådan! læste lige din forklaring... tak igen Ole :o)
Avatar billede olebole Juniormester
09. februar 2006 - 15:52 #19
Soze >> Ja og nej  :)
Jeg advarer blot mod at skifte klasse, dynamisk. Der er mange, der ikke ved, det performer rigtig skidt ... tag det som en uddybning.
Der er en enkelt fejl i dit eksempel: De dobbelte gåseøjne om element-ID'et skal være enkelte ... tag det som en rettelse.

Ellers tror jeg ikke, vi er uenige  ;o)
Avatar billede keysersoze Ekspert
09. februar 2006 - 15:55 #20
ja - ok, det rettelse er jeg så helt enig i. Desværre har jeg nogle indbyggede bugs der gør at jeg kommer til at variere brugen af " og ' ifb javascript :(
Avatar billede olebole Juniormester
09. februar 2006 - 15:58 #21
*LooOooL* et par bio-bugs ... ja, den slags kender jeg kun alt for godt  ;D

musicchart.dk >> Selvtak - og tak for points  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
White papers
Flere white papers »