Gå til innhold

Definere <span> i css. Mulig?

Anterialis

Anbefalte innlegg

Anterialis

Anterialis

Skrevet
Skrevet

Leste på en side at det var mulig å få opp gjemt tekst et sted på siden hvis du pekte på en link et annet sted på samme side.

 

Det stod at du feks kunne skrive i HTML:

<a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a>

 

og i CSS:

div#links a span {display: none;}

div#links a:hover span {display: block;
  position: absolute; top: 200px; left: 0; width: 125px;
  padding: 5px; margin: 10px; z-index: 100;
  color: #AAA; background: black;
  font: 10px Verdana, sans-serif; text-align: center;}

 

Jeg har ikke fått dette til. Noen som har prøvd dette og fått det til?

 

På forhånd takk :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Haraldson

Haraldson

Skrevet
Skrevet (endret)
prøv dette du:

 

.hide {
 display: none;
}

 

og i html'en din så legger du til dette:

<a href="http://www.meyerweb.com/eric/css/">Links<span class="hide">A collection of things which interest me, and might interest you</span></a>

 

Ikke noe værre enn det... :)

..?

 

Tror han mente at teksten skulle dukke opp en annen plass på siden...

Endret av Mr.Berg
Lenke til kommentar
FuLu

FuLu

Skrevet
Skrevet (endret)

Har testet denne:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* hack for IE */
a:hover {
	background-color: transparent;
}

a span {
	display: none;
}

a:hover span {
	display: block;
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 1em;
	background-color: #fafafa;
	border: 1px solid #efefef;
}
</style>
</head>
<body>

<a href="">Hei på deg<span>Denne skal komme i egen "boks"</span></a>

</body>
</html>

 

Fixed :w00t: er en bug i IE tydeligvis, hacken var den a:hover med background-color til transparent f.eks :green:

Endret av FuLu
Lenke til kommentar
Anterialis

Anterialis

Skrevet
  • Forfatter
Skrevet (endret)

Nja... hadde litt problemer da :s fikk en til å fungere:s

 

CSS

a span
{
display: none;
}

a:hover span
{
display: block;
position: absolute;
width: 88px;
height: 31px;
z-index: 1;
top: 215px;
left: 585px;
}

 

HTML

<a href="http://home.no.net/nanbjor2/index.php" class="my_link"><span>Til hovedsiden</span></a>
<a href="http://home.no.net/nanbjor2/idag.php" class="my_link2"><span>Forskjellig møkk</span></a>
<a href="http://home.no.net/nanbjor2/pics.php" class="my_link3"><span><Noe her</span></a>
<a href="http://home.no.net/nanbjor2/linker.php" class="my_link4"><span>Linker</span></a>
<a href="http://home.no.net/nanbjor2/credit.php" class="my_link5"><span>Credit</span></a>
<a href="javascript:history.back()" class="my_link6"><span>Tilbake</span></a>

 

Verdt å merke er at class my_link definerer et bilde. Linken til "idag" fungerer sånn at det kommer opp tekst et annet sted på siden men ingen andre... Forslag?

 

EDIT

Når jeg setter position absolute så kommer jo dette i forhold til den aktuelle linken? så hvis jeg har samme definisjon for alle <span>, og linken står under hverandre, så kommer også de tekstene som dukker opp under hverandre...

De blir liksom ikke satt ut ifra sia, men ut ifra der hvor linken står. Står det en link med <span> midt på siden, så kan jeg i css skrive top: 0px; og teksten i <span> dukker opp midt på siden :s Hvordan gjør jeg det?

 

Aktuell side: nanbjor.tk

Endret av w3p
Lenke til kommentar
FuLu

FuLu

Skrevet
Skrevet

Hmm, jau, dette så litt rart ut, virker som span blir relativ til a, selv om a er position: absolute :hmm:

 

Men sånn alt i alt, så er det egentlig dumt å ha sånn span sak inni a. Fordi nettsiden vil se helt rotete ut i textmode. Jeg tror javascript/DOM ville egnet seg best til sånne "effekter".

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...