CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

Kim_m Nybegynder

10. maj 2011 - 07:46 Der er 13 kommentarer og
1 løsning

Border ved hover kun på billede links.

Godmorgen.

Nogle af billederne på min side er links til større billeder.
Jeg vil gerne i min css fil style så der ved hover på, og kun på de billeder der er links, kommer en grøn border.

Lidt hjælp til det søges :-)

Ha en god dag.

Kim

Synes godt om

egmose Novice

10. maj 2011 - 08:08 #1

Html:
<img class="nogetduvælger" src="billledederlinkertilstørrebillede.jpg">

css:
.nogetduvælger:hover img{
border:2 px solid green;
}

Det skulle kunne gøre det, giv alle de billeder det gælder samme class og brug css koden ovenfor ;)

Synes godt om

phillips Nybegynder

10. maj 2011 - 08:22 #2

Hvis det kun skal være på de billeder, som linker, burde du kunne målrette din CSS til dem således:

HTML:
<a href="#"><img src="/sti/til/billede.jpg" /></a>

CSS
a:hover img {
  border: 2px solid green;
}

Synes godt om

egmose Novice

10. maj 2011 - 08:28 #3

Jeg kan godt følge dig philips og tænkte også lidt på det, men vil mene det er mere "fremtidssikret", med en class.. Også i forhold til hvis der er andre billeder der linker til noget - f.eks. en kontakt knap eller whatever..

Men det er selfølgelig altid godt med flere metoder ;)

Philips, hvordan laver du den "kasse"?? ;)

Synes godt om

phillips Nybegynder

10. maj 2011 - 08:38 #4

Du kan stadig sætte en class på:

a.navn-paa-klasse:hover img { ... }

Kassen sætter du ind med almindelige pre og div tags - < og > skal bare erstattes med [ og ]

Synes godt om

Kim_m Nybegynder

10. maj 2011 - 09:39 #5

Jeg havde også tænkt på noget som var rettet specielt til den slags billeder, men kan godt se din pointe egmose.

Kim

Synes godt om

Kim_m Nybegynder

10. maj 2011 - 21:24 #6

Hvordan får jeg fjernet den ramme der normalt kommer når et billede sættes som link?
Hvis jeg siger border="0" kommer der heller ingen ramme ved hover.

Hilsen
Kim

Synes godt om

phillips Nybegynder

11. maj 2011 - 08:21 #7

#6 Hvilken browser? Må jeg se din CSS + HTML til billedet og linket?

Synes godt om

Kim_m Nybegynder

11. maj 2011 - 11:20 #8

Nu virker det på IE 8.

css:
a.big:hover img{
border: 1px solid green;
}

html:
<a class="big" href="http://side"><img src="billede.gif" alt="billede" border="0"/></a>

Men det som er under billedet rykker sig når rammen kommer om billedet, er der noget at gøre ved det? Skal måske oprette et nyt spørgsmål.

Kim

Synes godt om

phillips Nybegynder

11. maj 2011 - 11:27 #9

Grunden til, at det rykker sig ved hover er, at der ikke er nogen border på i normal tilstand. Når der sættes en 1px border på bliver billedet reelt 2px højere.

I den normale tilstand (uden hover) kan du derfor sætte en 1px padding på billedet, og ved hover sætte padding til 0px og border til 1px.

Synes godt om

Kim_m Nybegynder

11. maj 2011 - 15:38 #10

Hej phillips
Er der en speciel grund til du vil bruge padding?
Jeg kan kun få det til at virke sådan her:

a.big:link img{
border: 1px solid #FFFFFF;
}

a.big:visited img{
border: 1px solid #FFFFFF;
}

a.big:active img{
border: 1px solid #FFFFFF;
}

a.big:hover img{
border: 1px solid #00FF00;
}

Ved godt det er dumt hvis der ikke er hvid baggrund men ved padding rykker det stadig ned.

Synes godt om

Kim_m Nybegynder

01. juni 2011 - 13:54 #11

Hej igen, undskyld der er gået noget tid, jeg har kodet og lært så jeg er grøn i hovedet :-)

Fået det til at virke helt perfekt nu.

Vil i smide et svar begge to.

Mange tak for hjælpen.

Kim

Synes godt om

Kim_m Nybegynder

04. juli 2011 - 17:47 #12

Hallo :-)

Vil I smide et svar.

Hilsen

KIm

Synes godt om

Kim_m Nybegynder

28. september 2011 - 21:08 #13

Så ligger jeg et svar :-)

Synes godt om

Kim_m Nybegynder

28. september 2011 - 21:13 #14

:-)

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 HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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