Avatar billede ghml Nybegynder
08. juni 2004 - 01:30 Der er 7 kommentarer og
1 løsning

Mouseover html kode til links

I min minu bruger jeg disse links :

<a href="forside.htm" target="main">Forsiden</a> <br>

Mit spørgsmål er så hvordan jeg omskriver dette så linket får en baggrundsfarve når musen holdes hen over det.
Avatar billede roenving Novice
08. juni 2004 - 01:34 #1
Det nemmeste er at sætte en style i stylesheet:

a:hover{
  background:blue;
}

-- hvilket har den fordel at det under alle omstændigheder vil virke, hvis browseren bare er nogenlunde uforældet !-)

Der kan også laves noget onmouseover (som vil være relativt simpelt !-), men det er uhensigtsmæssigt, når der findes den ovenstående !o]
Avatar billede ghml Nybegynder
08. juni 2004 - 01:43 #2
background:blue kan det ændres til formaterne #0000 ?

Kan man lave en onmouseover i koden for 1 link af gangen?

Tak (opret venligst svar)
Avatar billede roenving Novice
08. juni 2004 - 02:02 #3
Ja, du kan sagtens bruge hex-koder i css, faktisk plejer folk at blive overraskede over, at man kan bruge andet !-)

-- og der er to teknikker, du kan bruge til at lave forskel i links:

1. Sætte den gruppevis inde i elementer
2. Give dem en individuel class

-- og har du mulighed for det vil jeg absolut anbefale den første !-)

Se f.eks. dette i en browser:

<style type="text/css">
body{font-family:verdana,arial,sans-serif;font-size:x-small;color:#544659;}
#menu{
  width:120px;
  float:left;
  background:#333;
  position:relative;
}
#menu a{
  width:120px;
  color:#E2DCE4;
  font-weight:bold;
  text-decoration:none;
}
#menu a:hover{
  color:#D0CF95;
  background:#712646;
  text-decoration:underline;
}
#main{
  background:#ccc;
  float:left;
  position:relative;
}
#main a{
  color:#3D3852;
  font-weight:bold;
  text-decoration:underline;
}
#main a:hover{
  color:#D0CF95;
  background:#fff;
  font-style:italic;
}
</style>

<div id="menu">
  <a href="">link 1</a><br>
  <a href="">link 2</a><br>
  <a href="">link 3</a><br>
  <a href="">link 4</a><br>
  <a href="">link 5</a><br>
  <a href="">link 6</a><br>
</div>
<div id="main">
Her er en almindelig tekst, hvori der også er nogle links: <a href="">Et link</a><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lectus elit, sagittis at, accumsan id, dictum et, erat. Etiam non sapien. Quisque aliquet gravida mi. Integer vitae tortor quis wisi scelerisque vestibulum. Duis pulvinar magna non mauris laoreet volutpat. Aenean et purus. Cras accumsan justo sed arcu. Quisque urna. Sed mi. Ut sed nunc at lorem aliquet vulputate. Proin quis nibh. Proin ut dui vitae urna lacinia posuere. Ut vulputate purus facilisis nunc. Morbi ultrices euismod leo. Integer dui tellus, dictum in, viverra at, sagittis id, sem. Donec nonummy, sem eu hendrerit vulputate, nunc urna molestie eros, et semper nunc mi at ipsum. Praesent tempus malesuada felis.<br>

Vestibulum iaculis mattis sem. <a href="">Suspendisse hendrerit</a>, justo nec scelerisque mattis, ipsum lacus rutrum nibh, ac sollicitudin tellus felis eu ligula. Aliquam erat volutpat. Curabitur id magna. Aliquam eu magna id pede viverra varius. Nunc eu augue. Nulla quis ligula ac purus commodo vestibulum. Suspendisse adipiscing. Nullam velit. Integer nibh dolor, euismod non, blandit sed, ultricies vel, velit. Nulla posuere metus vel libero. Vestibulum elementum. Cras at nunc eget turpis tristique ullamcorper. In eget mi. Aliquam quis pede. Curabitur tincidunt est quis quam. Nunc elit nulla, ornare a, tristique eu, imperdiet in, eros. <br>

Nunc dolor. Nulla id purus vitae lacus interdum blandit. <a href="">Donec lorem ante</a>, rutrum eget, nonummy quis, luctus vel, eros. Quisque porttitor felis malesuada elit. Aliquam pretium purus vitae nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sem. In mattis ipsum id dolor. Vivamus quis neque. Etiam vitae velit. Phasellus interdum, eros sit amet porta rutrum, mi neque ornare diam, et nonummy ipsum eros a dolor. Maecenas ut ligula. Vivamus adipiscing dignissim neque. Cras sit amet sapien. <br>
</div>
Avatar billede roenving Novice
08. juni 2004 - 02:21 #4
-- og velbekomme '-)
Avatar billede ghml Nybegynder
09. juni 2004 - 19:55 #5
Jeg har nu indsat

a:hover{
  background:blue;
}

I menuen, men det virker ikke?

Der er ingen effekt når man holder musen over links
Avatar billede roenving Novice
09. juni 2004 - 19:58 #6
Det skal indsættes i et style-tag, som jeg har gjort det !-)
Avatar billede roenving Novice
09. juni 2004 - 19:58 #7
-- og style-tags skal sættes i head-sektionen ...
Avatar billede roenving Novice
12. juni 2004 - 10:32 #8
Tak for point ;~}
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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