Dotted border onder linkjes, maar niet onder afbeeldingen

[Menesis]

Voor een website wil ik graag een dotted streep onder een link als je er met de muis overheen hovered, dat heb ik zo opgelost in mijn css stylesheet:

code:

a:hover{
  border-bottom: 1px dotted #82B02A;  
}

het probleem is dat afbeeldingen met een link nu ook een streepje onder de afbeelding tonen en het lukt me niet om dit weg te halen. Het <a> element staat namelijk om het <img> element, dus ik kan geen onderscheid maken tussen een <a> om een plaatje of om een tekst...
Iemand enig idee hoe dit opgelost kan worden?

dit werkt namelijk niet:
a:hover img{
border:none !important;
}
Ter validatie: als ik het volgende uitvoer krijg ik een groene border om het plaatje te zien, met daarbij ook nog eens die dotted border eronder...
a:hover img{
border: 1px solid #00ff00;
}

[ Voor 0% gewijzigd door Menesis op 07-08-2012 14:34 . Reden: !important tag toegevoegd ]

[Mike2k]

Dan zou je een <div> of <span> om je <a href><img /></a> kunnen zetten...

Daarna kun je doen:
#div-of-span a:hover {
border:none;
}

Toch ?

[Alternative]

Probeer eens
a img{
border: none !important;
}

[Menesis]

@Mike: ja dat zou zeker kunnen, maar ik vind dat niet de 'mooiste' oplossing, het zou toch simpeler moeten kunnen?
@Alternative: helaas, werkt niet..

[Gamebuster]

Dit verbergt het bordertje. Smerig, maar het werkt. Het doet simpelweg je afbeelding over het bordertje laten lopen. Het nadeel hiervan is dat het niet werkt met transparante afbeeldingen. Je zult dan de afbeelding een achtergrond moeten geven.

Cascading Stylesheet:

a {
    border-bottom: 1px solid black;
    display: inline-block;
}
a img {
    position: relative;
    top: 1px;
    display: inline-block;
    vertical-align: bottom;
}

[ Voor 67% gewijzigd door Gamebuster op 07-08-2012 14:38 ]

[8088]

Menesis schreef op dinsdag 07 augustus 2012 @ 14:24:
dit werkt namelijk niet:
a:hover img{
border:none;
}

Je spreekt het verkeerde element aan: de border is van toepassing op a, niet img. !important toevoegen heeft daarom ook geen zin.

Waarom niet een aparte class gebruiken?

[OkkE]

Mike2k schreef op dinsdag 07 augustus 2012 @ 14:28:
Dan zou je een <div> of <span> om je <a href><img /></a> kunnen zetten...

Daarna kun je doen:
#div-of-span a:hover {
border:none;
}

Toch ?

Ik zou voor een variatie op deze oplossing gaan: geef de <a> waar een image in zit een extra class.

Alternative schreef op dinsdag 07 augustus 2012 @ 14:32:
Probeer eens
a img{
border: none !important;
}

De "!important" is sowieso onnodig. Verder zit daar het probleem niet.

Gamebuster schreef op dinsdag 07 augustus 2012 @ 14:35:
Dit verbergt het bordertje. Smerig, maar het werkt. Het doet simpelweg je afbeelding over het bordertje laten lopen. Het nadeel hiervan is dat het niet werkt met transparante afbeeldingen. Je zult dan de afbeelding een achtergrond moeten geven.

Cascading Stylesheet:

a {
    border-bottom: 1px solid black;
    display: inline-block;
}
a img {
    position: relative;
    top: 1px;
    display: inline-block;
    vertical-align: bottom;
}

[afbeelding]

Ik zou echt veel liever een extra class toevoegen aan een paar <a>'s dan een oplossing als deze, eerlijk gezegd.

[ Voor 38% gewijzigd door OkkE op 07-08-2012 14:39 ]

[Gamebuster]

OkkE schreef op dinsdag 07 augustus 2012 @ 14:38:
Ik zou echt veel liever een extra class toevoegen aan een paar <a>'s dan een oplossing als deze, eerlijk gezegd.

Ik ook, maar dat was zijn vraag niet
Ik laat alleen zien dat het kan.

edit: Dat was zijn vraag wel.

[ Voor 10% gewijzigd door Gamebuster op 07-08-2012 14:42 ]

[brambo123]

Net wat 8088 zegt:
je css heeft betrekking tot A en niet IMG
Je kan beter een aparte class gebruiken.

Cascading Stylesheet:

.dotted a:hoover{
    border-bottom: 1px dotted #82B02A;  
}

HTML:

<a class='dotted' href='http://<>/'>blabla</a>
<a href='http://<>/'><img src="image.png"/></a>

[Menesis]

Hmm, dan moet ik inderdaad maar een class toevoegen..

ik heb de a:hover nu achter p gezet (p a:hover{ } ) en dat scheelt alweer wat.

@Gamebuster: jouw oplossing werkte gek genoeg op 1 vd afbeeldingen (terwijl er 4 op dezelfde wijze door Drupal gegenereerd worden).

[ Voor 18% gewijzigd door Menesis op 07-08-2012 14:48 ]

[OkkE]

Gamebuster schreef op dinsdag 07 augustus 2012 @ 14:40:
[...]

Ik ook, maar dat was zijn vraag niet
Ik laat alleen zien dat het kan.

Hehe, true.

Ik vind het alleen wel nodig om in zo'n geval aan te geven dat een extra class toevoegen (in mijn ogen) een veel betere oplossing is.

brambo123 schreef op dinsdag 07 augustus 2012 @ 14:42:

Cascading Stylesheet:

.dotted a:hoover{
    border-bottom: 1px dotted #82B02A;  
}

HTML:

<a class='dotted' href='http://<>/'>blabla</a>
<a href='http://<>/'><img src="image.png"/></a>

Laten we er dan a.u.b. ten eerste een classname van maken die niets zegt over de stijl en ten tweede de uitzondering* (dus links met een image er in) juist geen border geven ipv anders om.

Ik zou alle links een :hover van 1px dotted geven en een aparte .figure:hover waarbij de border wordt weggehaald.

* Een link geen hover geven is altijd een uitzondering in mijn ogen.

Menesis schreef op dinsdag 07 augustus 2012 @ 14:46:
Hmm, dan moet ik inderdaad maar een class toevoegen..

ik heb de a:hover nu achter p gezet (p a:hover{ } ) en dat scheelt alweer wat.

Tot die <a><img></a> ook opeens binnen een <p> komt te staan ....

[ Voor 13% gewijzigd door OkkE op 07-08-2012 14:49 ]

[brambo123]

@OkkE
classname is altijd een eigen keuze, ik geef hier alleen maar even een snel voorbeeld...
En ik kies er toch voor dat links die je dotted wilt hebben de uitzondering is, persoonlijke keuze...

[8088]

brambo123 schreef op dinsdag 07 augustus 2012 @ 14:42:

Cascading Stylesheet:

.dotted a:hoover{
    border-bottom: 1px dotted #82B02A;  
}

In dat geval zou het parent element van a de klasse dotted moeten hebben. Dan is dit logischer:

Cascading Stylesheet:

a.dotted:hover{
    border-bottom: 1px dotted #82B02A;  
}

Toch zou ik het eerder (zoals OkkE al aangaf) zo doen:

Cascading Stylesheet:

a:hover {
    border-bottom: 1px dotted #82B02A;
}
a.figure:hover {
    border: none;
}

[ Voor 16% gewijzigd door 8088 op 07-08-2012 15:22 ]

[OkkE]

brambo123 schreef op dinsdag 07 augustus 2012 @ 14:57:
@OkkE
classname is altijd een eigen keuze, ik geef hier alleen maar even een snel voorbeeld...

Classname is uiteraard een eigen keuze. Maar ook al is het alleen even snel een voorbeeld, door dat jij nu de class "dotted" gebruikt, geef je imho het verkeerde voorbeeld.
Wat nu als er een wijziging komt waardoor het een normale streep wordt of helemaal geen streep meer maar een background-color?

En ik kies er toch voor dat links die je dotted wilt hebben de uitzondering is, persoonlijke keuze...

Dit is inderdaad vooral kwestie van smaak, persoonlijke keuze, etc...

[Bosmonster]

Sowieso is een "dotted underline" gereserveerd voor abbr.

[R4gnax]

Bosmonster schreef op dinsdag 07 augustus 2012 @ 20:01:
Sowieso is een "dotted underline" gereserveerd voor abbr.

Inderdaad. Op deze manier wordt de lijn der verwachting van de gebruiker met voeten getreden. Het is zeker geen goed UX design.