Notifikationer

Markér alle som læst Log ud

naftalin Nybegynder

11. november 2004 - 01:56 Der er 10 kommentarer

få backgroungcolor på element

Hej

jeg ønsker at mit inputfelt skal skifte farve når jeg fører musen hen over - som fx

<input typr="tekst" onMouseover='this.style.backgroundColor="#E7E3DB"' onMouseOut='this.style.backgroundColor="#ffffff"' >

Det kunne man jo godt gøre med hvert element - men så ryger fidusen ligesom ved css hvis man alligevel skal ind og ændre farverne i dokumentet. tænkte på om man kunne note ala

<input typr="tekst" onMouseover='a = this.style.backgroundColor; this.style.backgroundColor=[var fra css]"' onMouseOut='this.style.backgroundColor=a' >

Jeg vil altså kunne skifte farve med musen over - men farverne skal altså være sat i CSS - håber ikk det er helt sort :-)

Synes godt om

roenving Novice

11. november 2004 - 04:10 #1

Pt. er det ikke muligt i IE, men det er ellers muligt efter css-standarden, og virker f.eks. i Mozilla og Safari ...

.minInput{background:#345;}
.minInput:hover{background:#89a;}

-- hvis man skal lave samme nummer i IE skal man ud i andet end simpel javascript, da det er ret irriterende at hente værdier fra et stylesheet (man skal nemlig iterere igennem alle stylesheets og der iterere gennem alle selektorer og deres properties for at hente værdier ...

Synes godt om

roenving Novice

11. november 2004 - 04:34 #2

Men man kan f.eks.

<script type="text/javascript">var altbgcolor='#89a';</script>

<input class="minInput" type="text" onMouseover="this.style.backgroundColor=altbgcolor;" onMouseOut="this.style.backgroundColor='';">

-- med ovenstående deklaration i stylesheet !-)

Synes godt om

thomas_yde Nybegynder

11. november 2004 - 13:39 #3

Du kan også skifte class med mouseover
<input type="text" class="minklasse" onMouseOver="this.className='minklasse_hover'" onMouseOut="this.className='minklasse'">

Synes godt om

naftalin Nybegynder

11. november 2004 - 14:05 #4

Hmmmm tror jeg prøver lidt med det med at skifte klasse (slev om det er meget fjollet IE ikke understøtter det andet)

Synes godt om

thomas_yde Nybegynder

11. november 2004 - 14:06 #5

det er background-color:#FFFFFF;

Synes godt om

naftalin Nybegynder

11. november 2004 - 14:17 #6

hmmm kan ikke umidelbart på det til at virke.

dette er koden

ved i om det gør nogen forskel at jeg har angivet classen på min tabel

<input type="text" class="minklasse" onMouseOver="this.className='minklasse_hover'" onMouseOut="this.className='minklasse'"><html>
<head>
<style>
.search {
color : #AADE00;
font-family : verdana;
font-size : 8pt;
font-weight : bold;
}

.search input {
font-size : 8pt;
}

.search select {
font-size : 7pt;
}

.search input, select {
color : Fuchsia;
font-family : verdana;
font-weight : normal;
background-color : #505050;
border : 1px solid #EFEFEF;
border-style : solid;
border-width : 1px;
padding : 1px border-collapse: collapse;
}

.searchinputover {
background-color : Silver;
color : Red;
}
</style>
</head>
<body>
<table border="0" width="1" background="#000000" class="search">
<tr>
<td><b>Title</b> </td>
</tr>
<tr>
<td><input type="text" name="title" size="20"> </td>
</tr>
<tr>
<td><b>name</b> </td>
</tr>
<tr>
<td><input type="text" name="name" size="20" class="" onMouseOver="this.className='searchinputover'" onMouseOut="this.className=''"> </td>
</tr>
</table>
</body>
</html>

Synes godt om

naftalin Nybegynder

11. november 2004 - 14:18 #7

hov

i skal se bort fra

<input type="text" class="minklasse" onMouseOver="this.className='minklasse_hover'" onMouseOut="this.className='minklasse'">

inden

<html>

i eksemplet oven over

Synes godt om

thomas_yde Nybegynder

11. november 2004 - 14:26 #8

den skriver det korrekt uden din table class

Synes godt om

olebole Juniormester

11. november 2004 - 14:33 #9

<ole>

Skift _aldrig_ klasse på mouse-events. Det performer ekstremt dårligt, da browseren skal spytte et nyt DOM-træ ud for hele dokumentet og parse det - hvergang der skiftes.
Det vil altid være væsentligt bedre og hurtigere at skifte de enkelte style-properties på elementet ;o)

/mvh
</bole>

Synes godt om

naftalin Nybegynder

15. november 2004 - 22:15 #10

jeg vil prøve at huske det med klasse og mouse

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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	03/05/202613:59
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS