Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

hover Css3

10 views
Skip to first unread message

Hans Lommeuld

unread,
Apr 11, 2012, 12:12:53 AM4/11/12
to
Jeg har et lille css opgave måske er der en her som har en ide til
hvordan det løses!?

Jeg er godt klar over at dette site primært er for php.

Jeg skal på et link lave en hover-effekt. Når musen kommer over linket
skal der på hver side af linket, fremkomme
<<link>> i specielttegn &Lt; og &Gt;

Jeg har haft pseudo- classes og transform/transsision i tankerne men
har ikke kunne finde et eksempel.

Jeg vil helst ikke ud i noget gif og billedbehandling.

Hilsen

Claus
Alias: Hans Lommeuld

Karl Erik Christensen

unread,
Apr 11, 2012, 4:41:49 AM4/11/12
to
Sæt tegnene i <span>&lt;&lt;</span>tekstlink<span>&gt;&gt;</span>

I css:

a span, a:visited span {
display: none;
}

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://produceret-i.dk/ - Køb danske produkter
http://webdesign.ranunkelvej.com - Artikler om webdesign

Karl Erik Christensen

unread,
Apr 11, 2012, 4:56:33 AM4/11/12
to
On 11-04-2012 10:41, Karl Erik Christensen wrote:
> Sæt tegnene i <span>&lt;&lt;</span>tekstlink<span>&gt;&gt;</span>
>
> I css:
>
> a span, a:visited span {
> display: none;
> }

Sorry, brug visibility i stedet da visibility stadig optager plads.
Så undgår du "hopperi" ved hover:

a span, a:visited span {
visibility: hidden;
}
a:hover span {
visibility: visible;

Rune Jensen

unread,
Apr 11, 2012, 10:56:15 AM4/11/12
to
On 11 Apr., 06:12, Hans Lommeuld <hanslomme...@gmail.com> wrote:

> Jeg skal på et link lave en hover-effekt. Når musen kommer over linket
> skal der på hver side af linket, fremkomme
> <<link>> i specielttegn &Lt; og &Gt;

a:bover:before{
content: "<<";
}

a:hover:after{
content: ">>";
}

Se standarden for :before og :after pseudoclasses her:
http://www.w3.org/TR/CSS21/generate.html

Du skal - muligvis - ud i noget escape, se eksempel samt (link til)
table her:
http://css-tricks.com/css-content/

Hov... :before og after er jo ikke CSS3, men CSS2.1 :)

OK, men så kan IE8 - måske - også være med. Kan ikke huske, om den
forstår content.

MVH
Rune Jensen

scootergrisen

unread,
Apr 11, 2012, 11:46:30 AM4/11/12
to
> Jeg er godt klar over at dette site primært er for php.

Jeg tror nok folk plejer at spørge om CSS i :
dk.edb.internet.webdesign.html

Korriger mig hvis jeg tager fejl.

Hans Lommeuld

unread,
Apr 11, 2012, 12:36:31 PM4/11/12
to
Tak for alle svar

Karl Erik Christensen

unread,
Apr 11, 2012, 12:49:58 PM4/11/12
to
"wait a second; for years we’ve been separating layout from content,
allowing us to easily edit a whole website layout from a single file.
The pseudo-elements seem to be going against this mantra"

Kan du mærke tsunamien? :-)

Karl Erik Christensen

unread,
Apr 12, 2012, 8:42:29 AM4/12/12
to
On 11-04-2012 16:56, Rune Jensen wrote:
:before og :after indsætter tegnene ved hover.

Derfor "hopper" den øvrige tekst frem og tilbage.
Det gør den ikke ved eksemplet med <span> og visibility, da visibility
holder pladsen til tegnene.

I øvrigt er css2.1 styles vel også css3, med undtagelse af de der er
deprecated.

Rune Jensen

unread,
Apr 14, 2012, 12:10:10 PM4/14/12
to
On 11 Apr., 18:49, Karl Erik Christensen <karle...@none.invalid>
wrote:

> "wait a second; for years we’ve been separating layout from content,
> allowing us to easily edit a whole website layout from a single file.
> The pseudo-elements seem to be going against this mantra"

CSS3 content kan misbruges, det er klart. Jeg har selv nogle idéer til
en ren CSS3-side... sådan bare for sjov.

Men det handler ikke iflg. standarden om, at man _tilføjer_ nyt
indhold, men at man præsenterer allerede eksisterende indhold på en
anden måde. Det sidste er fuldt lovligt...

Et eksempel er, man lægger en img som denne
https://www.google.com/search?tbm=isch&hl=da&source=hp&biw=1280&bih=865&q=.pdf&gbv=2&oq=.pdf&aq=f&aqi=g1g-C9&aql=&gs_l=img.3..0j0i33l9.2586l3303l0l4387l4l4l0l0l0l0l71l264l4l4l0.frgbld.#q=pdf+icon&hl=da&gbv=2&tbs=isz:ex,iszw:18,iszh:18&tbm=isch&tbas=0&source=lnt&sa=X&ei=q6CJT-mSHYHE4gSuop34CQ&ved=0CCoQpwUoAA&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=f144bc1cd429a832&biw=1280&bih=865

i enden af alle links, som har .pdf som endelse - her en forklaring
til atrb.
http://reference.sitepoint.com/css/css3attributeselectors

Det vil ikke skade for den blinde, men yderligere hjælpe den seende.

De dér tegn << og >> som sættes om hvert link er ikke nyt indhold, det
er allerede eksisterende indhold præsenteret på en anden måde. Ligesom
billeder, som bruges til pynt.


MVH
Rune Jensen

Rune Jensen

unread,
Apr 14, 2012, 12:27:27 PM4/14/12
to
On 12 Apr., 14:42, Karl Erik Christensen <karle...@none.invalid>
wrote:

> :before og :after indsætter tegnene ved hover.
>
> Derfor "hopper" den øvrige tekst frem og tilbage.
> Det gør den ikke ved eksemplet med <span> og visibility, da visibility
> holder pladsen til tegnene.

Jomen 1. du lægger EMM præsentation ind i indholdet i din løsning -
udover den er ret omfattende; Hvis du skal have mange links, så skal
du have fire tegn for hvert link... plus en span for hver i HTMLen. og
2. problemet med hoppene ved :before og :after kan løses med ganske
alm. CSS. Eksempelvis ved at give den samme plads både med og uden
tegnene. Jeg kan godt forestille mig din løsning direkte overført til
CSS sådan set.

Jeg har lavet sådanne løsninger før i forskellige varianter
med :before og :after. Men jeg har ikke pt. adgang til min gamle
maskine hvor jeg har de her CSS-"ting". Har så heller ikke lige
muligheden for at teste.


MVH
Rune Jensen
0 new messages