Søg
Avatar billede hurra Novice
05. oktober 2003 - 23:25 Der er 19 kommentarer og
3 løsninger

skift farve onmouse i css

Jeg har brug for at et felt i en table skifter farve onmouseover. Det er let nok, men efter at have flyttet "default" farven til en css, virker det ikke længere.

Er der nogen der kan hjælpe ?
Er det evt muligt i css at skrive hvilken farve den skal ha som default, onmouseover og onmouseout ? Det kunne være sejt :)
Avatar billede schaefner Juniormester
05. oktober 2003 - 23:34 #1
det burde ikke have nogen betydning om standard-farven står i en seperat fil.

onmouseover="this.style.background='lightyellow'"
Avatar billede schaefner Juniormester
05. oktober 2003 - 23:37 #2
men det andet du efterspørger er ikke muligt.
Avatar billede schaefner Juniormester
05. oktober 2003 - 23:42 #3
evt, via en funktion:

<script type="text/javascript">
function switchBack(element,color) {
    element.style.background=color;
}
</script>


<td onmouseover="switchBack(this,'#EEEEEE')" onmouseout="switchBack(this,'#AAAAAA')">&nbsp;</td>

mvh. Jesper Sørensen
Avatar billede skovenborg Nybegynder
05. oktober 2003 - 23:45 #4
det er, til det andet spørgsmål, muligt at bruge nogle pseudo-elementer til at fx lave farven om når du flytter musen over noget. Desværre understøttes dette kun af A (link) elementerne i IE, mens i hvert fald de nyere udgaver af Mozilla understøtter det for andre.

Nå, nu til et eksempel (virker altså ikke i IE):
<html>
<head>
<style type="text/css">
TD { background:#f00; }
TD:hover { background:#0f0; }
</style>
</head>
<body>
<table>
<tr>
<td>Skift baggrund</td>
</tr>
</table>
</body>
</html>
Avatar billede skovenborg Nybegynder
05. oktober 2003 - 23:46 #5
...men brug schaefners alligevel, så alle IE brugere også kan se det ;-)
Avatar billede schaefner Juniormester
05. oktober 2003 - 23:54 #6
ja, dem er der jo desværre en del af ;)

Havde slet ikke tænkt på den anden løsnings-model :)
Avatar billede hurra Novice
06. oktober 2003 - 12:06 #7
Tak for begge løsninger, i får pointene 5050.
Skovenborg> Vil du ikke sende et svar så du kan få lidt ud af det.
Avatar billede ohmish Nybegynder
06. oktober 2003 - 14:42 #8
det kan også gøres uden table:

<a href="" class="block">css mouseover</a>

og i stylesheetet:

a.block { color: blue; background-color: transparent; text-decoration: none; padding-left: 12px; padding-right: 12px; padding-top: 3px; padding-bottom: 3px; }
a.block:hover { color: blue; background-color: yellow; }
a.block:active { color: blue; background-color: yellow; }
a.block:visited { }
Avatar billede ohmish Nybegynder
06. oktober 2003 - 15:14 #9
og uden javascript tilmed
Avatar billede ohmish Nybegynder
06. oktober 2003 - 15:16 #10
ellers kunne du bruge:

onmouseover="this.ClassName='blockhover'"

men det er unødvendigt, når det kan klares uden javascript
Avatar billede schaefner Juniormester
06. oktober 2003 - 16:45 #11
ohmish >> Det kræver så bare at det skal være links
Avatar billede ohmish Nybegynder
06. oktober 2003 - 16:50 #12
ja. men det gør vel intet.

<a href="#" class="block">en masse tekst her i en kunstig celle</a>

a.block { color: black; background-color: transparent; text-decoration: none; padding-left: 12px; padding-right: 12px; padding-top: 3px; padding-bottom: 3px; }
a.block:hover { color: black; background-color: red; }
a.block:active { color: black; background-color: red; }
a.block:visited { }
Avatar billede ohmish Nybegynder
06. oktober 2003 - 16:52 #13
jeg er nysgerrig.. hvorfor skal cellen skifte farve?
Avatar billede skovenborg Nybegynder
06. oktober 2003 - 17:21 #14
bare lad schaefner få pointene. Min løsning måske fin nok, men kun i browsere som understøtter CSS ordentligt.
Avatar billede hurra Novice
07. oktober 2003 - 12:45 #15
skovenborg> Jeg syntes din løsning er god, og hvis der er nok der syntes om den og bruger det, kan det være MS begynder at lavet noget ordentligt på et tidspunkt :) Jeg syntes du skal ha points så jeg vil stadig gerne ha et svar fra dig.

ohmish> Det ser smart ud, men jeg har ikke lige mulighed for at prøve det lige nu, men jeg skal nok give en tilbage melding når jeg ved noget.

Det gør egentligt ikke noget det er links, i nogle af cellerne skal der aligevel være links i. Jeg har lavet en kalender så jeg altid kan se mine aftaler uanset hvor jeg befinder mig. I de felter, hvor der er en aftale skrevet ind i, skal der være links.
Avatar billede ohmish Nybegynder
07. oktober 2003 - 13:18 #16
ok.. så kan du f.eks lave 2 css klasser/id:

i stylesheetet:

a.ledig { color: white; background-color: green; text-decoration: none; padding-left: 12px; padding-right: 12px; padding-top: 3px; padding-bottom: 3px; }
a.ledig:hover { color: black; background-color: white; }
a.ledig:active { color: black; background-color: white; }
a.ledig:visited { }

a.optaget { color: white; background-color: red; text-decoration: none; padding-left: 12px; padding-right: 12px; padding-top: 3px; padding-bottom: 3px; }
a.optaget:hover { color: black; background-color: white; }
a.optaget:active { color: black; background-color: white; }
a.optaget:visited { }


På selve siden:

<a href="kalender.php?id=1234" class="optaget">tir d. 7. oktober</a>
<a href="kalender.php?action=opret" class="ledig">ons d. 8. oktober</a>
Avatar billede skovenborg Nybegynder
07. oktober 2003 - 16:28 #17
okay så.. hvis det ikke kan være andeledes ;-)
Avatar billede skovenborg Nybegynder
07. oktober 2003 - 17:31 #18
om microsoft nogensinde vil komme til at understøtte den officiele CSS standard ordentlig nogensinde, er jo svært at sige - de har det jo med at gå deres egne, ifølge dem selv, bedre veje ;-)

I grunden står der også i CSS-recommendationen (som det så fint hedder), at den enkelte browser selv må vælge hvor meget :hover, og den slags pseudo-elementer, må bruges på - hvis jeg vel at mærke har læst det rigtigt. Så om MS har lavet noget forkert, er jo lige spørgsmålet - men de er nu stadig dårlige til at understøtte den nyeste form for CSS :-(
Avatar billede olebole Juniormester
08. oktober 2003 - 06:58 #19
<ole>

Der er da vist ikke nogen, der har forklaret dig, hvorfor du fik problemer i første omgang.
Det hænger formodentlig sammen med forskellen, der er mellem at sætte en farve direkte på et elements style-object - og så sætte den via et style-sheet (remote eller ej):

<style type="text/css">
div {
  color: red;
}
</style>

<div onclick="alert(this.style.color)">En tekst</div>

... og:

<div style="color:red" onclick="alert(this.style.color)">En tekst</div>

Kun den sidste virker, da property'en er sat på elementets style-object.
Det første eksempel kunne bringes til at virke (men _kun_ i IE, da det ikke er standard) med:

<div onclick="alert(this.currentStyle.color)">En tekst</div>

Til skovenborgs kommentar vedr. MS, er det rigtigt, de (heller) ikke er så gode til det med det avancerede CSS.
Til gengæld hører ormehuller til i den allermest avancerede fysik ... og er der noget, MS kan - så er det ved Gud at lave ormehuller ...!  ;oD

/mvh
</bole>
Avatar billede olebole Juniormester
08. oktober 2003 - 07:03 #20
... og for lige at pinde den helt ud, så kan du altså ikke bruge scripts à la:

<script>
function swapColor( elm ) {
  elm.style.color = ( elm.style.color=="red" )? "green" : "red";
}
</script>
<style>
div {
  color: red;
}
</style>
<div onmouseover="swapColor(this)" onmouseout="swapColor(this)">En tekst</div>

... hvorimod du godt kan:

<script>
function swapColor( elm ) {
  elm.style.color = ( elm.style.color=="red" )? "green" : "red";
}
</script>

<div onmouseover="swapColor(this)" onmouseout="swapColor(this)"
    style="color:red">En tekst</div>

... det var bare lige det, jeg ville sige  ;o)
/mvh
Avatar billede hurra Novice
09. oktober 2003 - 22:05 #21
Mange tak alle sammen, jeg har lavet noget lidt i stil med ohmish forslag. Det er kun de felter hvor man har aftaler i der skifter farve nu (jeg har altså ikke lavet et "dummy" link "#").

I får lidt points alle samme for at have hjulpet mig til at forstå hvordan det virker. Også tak til dig olebole selv om du bliver snydt for points.
Avatar billede olebole Juniormester
09. oktober 2003 - 22:17 #22
Det er helt okay ... jeg 'sulter' ikke ligefrem  :)
/mvh
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 JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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 dag 11:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
I dag 11:16 problem med mailbesked Af Pestilensen i Excel
I dag 10:45 Powerbank Af postpeter@outlook.dk i Fri debat
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
22/0820:06 email adresse Af Malm i Forslag til ændringer
White papers
Flere white papers »