---

Hej!

Jeg er ved at lave en hjemmeside og skal ha' gjort sådan jeg kan
få en tekst vist når man hovere over et link. Evt. andetsteds på
siden, hvis det kan lade sig gøre uden brug af Javascript.

Altså linket ser således ud:

1234

Men når man hovere bliver 56789 synliggjort!

Altså linket kommer til at se således ud:

123456789

Hvordan kan jeg gøre det?

Mvh Jesper Poulsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jesper Poulsen wrote:

> Jeg er ved at lave en hjemmeside og skal ha' gjort sådan jeg kan
> få en tekst vist når man hovere over et link. Evt. andetsteds på
> siden, hvis det kan lade sig gøre uden brug af Javascript.

Prøv at se tråden "Skjul/vis tekst" som startede i går kl. 15:13 i denne
gruppe.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/

---

> Prøv at se tråden "Skjul/vis tekst" som startede i går kl. 15:13 i denne
> gruppe.

Ja, det er ikke helt samme problem. Ellers tak!

Jeg har tænkt mig frem til at lave denne kode:

html:

<a href="site" title="site"> Link <span class="hidden"> Hidden </span></a>

css:

skjult {display: none;}

a.test:link {color: green;}
a.test:visited {color: green;}
a.test:hover {display: hvad-skal-der-stå-her-?}
a.test:active {color: red;}

Håber I forstår!

Mvh Jesper Poulsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jesper Poulsen skrev:

>> Prøv at se tråden "Skjul/vis tekst"

> Ja, det er ikke helt samme problem.

Hvori består den store forskel?


> <a href="site" title="site"> Link <span class="hidden"> Hidden
> </span></a>
>

> skjult {display: none;}

Det er nok en ide hvis du bruger samme klassenavn i html-koden som
i css-koden (hidden eller skjult).

I princippet kan du klare dig med følgende:

   .hidden{ display: none; }
   :hover .hidden { display: inline; }

- men det virker ikke i IE (det sædvanlige problem med begrænset
understøttelse af :hover). Hvis man imidlertid tilføjer linjen her:

   a:hover{ width: auto; }

- så kommer IE også med (don't ask why). Til gengæld er Firefox
ikke så glad for at "slippe" synliggørelsen af den skjulte tekst
igen.

Se testside her: <http://gyros.dk/usenet/html/hoverskjul.shtml>.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Hej Jens!
"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev i en meddelelse
news:Xns9781D62D229jcdmfdk@gyrosmod.cybercity.dk...
> Det er nok en ide hvis du bruger samme klassenavn i html-koden som
> i css-koden (hidden eller skjult).
>
> I princippet kan du klare dig med følgende:
>
> .hidden{ display: none; }
> :hover .hidden { display: inline; }
>
> - men det virker ikke i IE (det sædvanlige problem med begrænset
> understøttelse af :hover). Hvis man imidlertid tilføjer linjen her:
>
> a:hover{ width: auto; }
>
> - så kommer IE også med (don't ask why). Til gengæld er Firefox
> ikke så glad for at "slippe" synliggørelsen af den skjulte tekst
> igen.
>
> Se testside her: <http://gyros.dk/usenet/html/hoverskjul.shtml>.

Og den har jeg så "leget" lidt med....:

Original-css (set i kildekoden):

<style type="text/css">
.eksempel{ text-align: center; font-size: 2em; }
.hidden{ display: none; }
:hover .hidden { display: inline;}
a:hover{ width: auto;}
</style>

Med ovenstående går det rigtigt nok galt i FF...

Min version:

<style type="text/css">
.eksempel{ text-align: center; font-size: 2em; }
.hidden{ display: none; }
a:hover .hidden { display: inline;}
a:hover{ width: auto;}
</style>

Så kan FF også være med...


Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
http://www.cantica.dk/, http://www.eds-denmark.dk/

---

> Min version:
>
> <style type="text/css">
> .eksempel{ text-align: center; font-size: 2em; }
> .hidden{ display: none; }
> a:hover .hidden { display: inline;}
> a:hover{ width: auto;}
> </style>
>
> Så kan FF også være med...

Jeps! Tak, det var præcis det jeg ledte efter

Mvh Jesper Poulsen

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Dennis Munding skrev:

> Og den har jeg så "leget" lidt med....:

[snip]

> a:hover .hidden { display: inline;}

Ah - selvfølgelig, godt set!

Det er sådan set logisk nok - da :hover jo netop kan være på andre
elementer end a, og descendant-syntaksen ikke kræver at det indre
element er direkte barn af det ydre. En anden måde man kan få det
til at virke på i Firefox er med child-selektoren:

   :hover > .hidden { display: inline;}

- men det er mere logisk at bruge den rettelse du har foreslået.

Jeg har opdateret siden nu, tak for hjælpen.

--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Hej Jens!
"Jens Gyldenkærne Clausen" <jens@gyros.invalid> skrev i en meddelelse
news:Xns97825D20EB5Djcdmfdk@gyrosmod.cybercity.dk...
> Dennis Munding skrev:
>
>> Og den har jeg så "leget" lidt med....:
>
> [snip]
>
>> a:hover .hidden { display: inline;}
>
> Ah - selvfølgelig, godt set!

Ja, og så er jeg endda stadig halvt newbie!

> Det er sådan set logisk nok - da :hover jo netop kan være på andre
> elementer end a, og descendant-syntaksen ikke kræver at det indre
> element er direkte barn af det ydre. En anden måde man kan få det
> til at virke på i Firefox er med child-selektoren:
>
> :hover > .hidden { display: inline;}
>
> - men det er mere logisk at bruge den rettelse du har foreslået.
>
> Jeg har opdateret siden nu, tak for hjælpen.

Det var så lidt... Skulle der være en anden gang....


Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
http://www.cantica.dk/, http://www.eds-denmark.dk/