Enkel mouseover effect

rabattnett
rabattnetts bilde
Avlogget
Ble med: 23.02.2010

Hei,

Noen som vet hva slags kode/hvor jeg finner koden om hvordan man får en underscore under hele linken ved å holde museknappen over linken? Tro dette er en av de alle vanligste effektene å ha på linker.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Underline under linker ved mouse over med CSS

Slik (CSS)

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
rabattnett
rabattnetts bilde
Avlogget
Ble med: 23.02.2010
flott, hvor skal jeg plasse

flott, hvor skal jeg plassere den i dokumentet?

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
CSS-koder i CSS-dokumenter

Dette bør plasseres i CSS-dokumentet ditt. (Sjekk gjerne ut videoguidene om HTML og CSS, da blir dette mye enklere for deg :)

Tim
Tims bilde
Avlogget
Ble med: 15.01.2010
Hei Tipper da at dette er til

Hei Tipper da at dette er til din nettsiden suprtilbud. Ser du enda ikke har noen understrek når det kommer til menyen. Du har også valgt å ha HTML og CSS i samme dokument. Dette er noe du burde skille fra hverandre. Dette er ingen vanskelig ting å foreta seg så kan forklare dette veldig enkelt.

Åpne dokumente ditt Så inne i head taggene finner du CSS informasjonen din.

  1. <STYLE type=text/css> CSS - Kondene dine </STYLE>


Dette burde du da flytte over til en egen fil som du kaller: style.css(ordet før punktum er valgfritt men husk å avslutte med .css)

Når denne filen er lagret går du tilbake til HTML/PHP filen din. Der limer du inn:

  1. <link rel="stylesheet" type="text/css" href="style.css" />

Denne linken kobler HTML filen din sammen med CSS filen din. Om du separerer disse tingene er det mye lettere å jobbe med seinere. Ga dette ingen mening gjør som bruker Hjemmeside sa å ta en titt i video guiden smil

Tilbake til det du egentlig lurte på:

  1. a{
  2. color:#4682b4;
  3. text-decoration:none;
  4. }
  5.  
  6. a:hover{
  7. color:#ffcc00;
  8. text-decoration:none;
  9. }

Definisjon av css kodene dine:

  • a = link hvordan en link skal se ut på din hjemmeside
  • color = Der har du bestemt at linken skal ha fargen #4682b4
  • text-decoration = Er satt til ingenting altså den skal se helt vanelig ut.
  • a:hover = Dette er hvordan teksen vil se ut når du holder over den.
  • color = Du har da bestemt at den skal endre farge til
  • #ffcc00 text-decoration = Her må du endre fra none til underline

Gjør du det vil det da se slik ut:

  1. a{
  2. color:#4682b4;
  3. text-decoration:none;
  4. }
  5. a:hover{
  6. color:#ffcc00;
  7. text-decoration:underline;
  8. }

Selv foretrekker jeg litt mer pusterom i kodingen, en du har på den nettsiden samt. et helt annet oppsett.

PS: Sorry rottette innlegg men var veldig rare måter å få frem kodene på en hva jeg er vant til venner meg sikkert til det og blir nok mer ryddige poster fra meg fremover. Må nesten gå og legge meg nå xD

Hjemmeside: Jeg har fikset så kodene ser pene og rene ut smil

 Tim @ Gambinomafia

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.