Notifikationer

Markér alle som læst Log ud

mik Nybegynder

11. august 2005 - 15:17 Der er 12 kommentarer og
1 løsning

Formatering af Hover tekst

Jeg vil forsøge at styrer formateringen af HOVER teksten med nedenstående kode, men det virker ikke efter hensigten.

Det er specielt denne linie der volder problemer:

foer.style.hover.color = "#FF00FF";

*****************************************

<html>
<head>
<style type="text/css">
.menumab {
color: #FFFFFF;
background-color: #3366FF;
display: block;
width: 100%;
padding: 1px;
font-family: Arial;
font-size: 8pt;
text-decoration: none;
}
A.menumab:hover{
background-color: #99ACC8;
color: #FF00FF
}
A.menumab:active{
text-decoration: underline;
color: #FFFF00
}
</style>
<script type="text/javascript">
foer = null;

function highlight(lnk) {
if (foer){
foer.style.color = "#FFFFFF";
foer.style.fontWeight = "normal";
foer.style.hover.color = "#FF00FF";
}
lnk.style.color = "#FFFF00";
lnk.style.fontWeight = "bold";
foer = lnk;
}
</script>
</head>
<body>
<a class="menumab" href="http://www.eb.dk" onclick="highlight(this);" target="_Blank">1</a>
<a class="menumab" href="http://www.tv2.dk" onclick="highlight(this);" target="_Blank">2</a>
<a class="menumab" href="http://www.dr.dk" onclick="highlight(this);" target="_Blank">3</a>
</body>
</html>

Synes godt om

roenving Novice

11. august 2005 - 15:20 #1

-- du kan såvidt jeg ved ikke få adgang til pseudo-selektorer via javascript ...

-- men hvis du sætter :active, vil det vel gøre tricket, sålænge du ikke trykker nogle andre steder i dokument ?-)

Synes godt om

mik Nybegynder

11. august 2005 - 15:28 #2

Ikke forstået. Hvis du fjerne denne linie -> foer.style.hover.color = "#FF00FF"; <- fungerer :active udemærket også selvom du klikker andre steder...

Synes godt om

roenving Novice

11. august 2005 - 15:33 #3

-- så har jeg ikke forstået hvad du vil ?-)

-- jeg gættede på, at det, du ønskede, var, at der, når du havde klikket på et link, kom en anden farve på, mens det vindue var åbent ?o]

Synes godt om

mik Nybegynder

11. august 2005 - 15:43 #4

Hvis du fjerne linien -> foer.style.hover.color = "#FF00FF"; <- vil du se at teksten er hvis. hvis man klikker på den bliver den "active" og teksten bliver gul og der forbliver den med indtil du klikker på et andet punkt. Hoverteksten er rød første gang du kører henover et punkt der ikke har været klikket på. Næste gang du klikker på det er den hvid og der kommer en fejl -> 'foer.style.hover' er null eller ikke et object <- hvilket ikke siger mig så meget...

Synes godt om

roenving Novice

11. august 2005 - 15:54 #5

Det er meget browser-afhængigt, hvordan :active fortolkes, i IE er active aktivt, til der trykkes på noget andet, ihvert fald den første anden browser, jeg kiggede på, var active kun aktivt, mens musen blev holdt nede ovenpå linket ...

-- men fejl-meddelelsen siger, at du under ingen omstændigheder kan ændre på :hovers funktion med javascript, da style-objektet ikke understøtter det !o]

-- så uden at skulle ud i klasse-udskiftning (hvilket bestemt ikke kan anbefales, hvis der overhovedet er en chance for at undgå det !-), er den eneste mulighed, vist at du nøjes med det simple:

<html>
<head>
<style type="text/css">
.menumab {
color: #FFFFFF;
background-color: #3366FF;
display: block;
width: 100%;
padding: 1px;
font-family: Arial;
font-size: 8pt;
text-decoration: none;
}
A.menumab:hover{
background-color: #99ACC8;
color: #FF00FF
}
A.menumab:active{
text-decoration: underline;
font-weight:bold;
color: #FFFF00
}
</style>
</head>
<body>
<a class="menumab" href="http://www.eb.dk" target="_Blank">1</a>
<a class="menumab" href="http://www.tv2.dk" target="_Blank">2</a>
<a class="menumab" href="http://www.dr.dk" target="_Blank">3</a>
</body>
</html>

Synes godt om

mik Nybegynder

11. august 2005 - 16:01 #6

Jeg forstår det er noget kompliceret noget. Det kan jeg også se når jeg søger på nettet efter nogle løsninger. Jeg syntes du skal lægge et svar så du kan få nogle point for din ulejlighed.

Synes godt om

roenving Novice

11. august 2005 - 16:08 #7

Det skal tilføjes, at når du med javascript sætter style-properties gælder de absolut for elementet, men du kan fjerne virkningen ved at sætte dem tilo ingenting:

function highlight(lnk) {
if (foer){
foer.style.color = "";
foer.style.fontWeight = "";
}
lnk.style.color = "#FFFF00";
lnk.style.fontWeight = "bold";
foer = lnk;
}

Synes godt om

mik Nybegynder

11. august 2005 - 16:17 #8

Hvad hvis man bruger onmouseout= og onmouseover= kan man så ikke lave en hover effekt. jeg har lavet nedenstående, men ser godt nok lidt mærkeligt ud.

Kører hjem nu så der går et lille stykke tid inden jeg kan svare.

<html>
<head>
<style type="text/css">

.menuOver {
background-color: #99ACC8;
color: #FF00FF
}

.menumab {
color: #FFFFFF;
background-color: #3366FF;
display: block;
width: 100%;
padding: 1px;
font-family: Arial;
font-size: 8pt;
text-decoration: none;
}
A.menumab:hover{
background-color: #99ACC8;
color: #FF00FF
}
A.menumab:active{
text-decoration: underline;
color: #FFFF00
}
</style>
<script type="text/javascript">
foer = null;

function highlight(lnk) {
if (foer){
foer.style.color = "#FFFFFF";
foer.style.fontWeight = "normal";
foer.style.hover.color = "#FF00FF";
}
lnk.style.color = "#FFFF00";
lnk.style.fontWeight = "bold";
foer = lnk;
}
</script>
</head>
<body>
<a class="menumab" onmouseover="this.className='menuOver'" onmouseout="this.className='menumab'" href="http://www.eb.dk" onclick="highlight(this);" target="_Blank">1</a>
<a class="menumab" onmouseover="this.className='menuOver'" onmouseout="this.className='menumab'" href="http://www.tv2.dk" onclick="highlight(this);" target="_Blank">2</a>
<a class="menumab" onmouseover="this.className='menuOver'" onmouseout="this.className='menumab'" href="http://www.dr.dk" onclick="highlight(this);" target="_Blank">3</a>

<span id="menuItem2_1" class="menumab" onmouseover="this.className='menuOver'" onmouseout="this.className='menumabf'">TEST</span>
</body>

Synes godt om

roenving Novice

11. august 2005 - 16:22 #9

Jo, man kan godt benytte sig af klasse-skift, men det er absolut uhensigtsmæssigt, fordi browseren så er nødt til at kaste sit cs-dom-træ i havet og starte forfra med at beregne dokumentet, ligesom når dokumentet loades ...

-- derfor kan jeg ikke anbefale den til brug for almindelige style-ting, men har du prøvet tricket med at nulstille de properties, du sætter ?-)

Synes godt om

mik Nybegynder

11. august 2005 - 19:06 #10

Det var jo bare det der skulle til, lægger du lige et svar :-)

Synes godt om

roenving Novice

11. august 2005 - 19:15 #11

Velbekomme '-)

Synes godt om

mik Nybegynder

11. august 2005 - 19:49 #12

Endnu engang tak ;-)

Synes godt om

roenving Novice

11. august 2005 - 22:15 #13

-- og jeg takker for point ;~}

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