Selection og opacity

[sigvald68]

Jeg jobber med et litt merkelig nettsted hvor teksten skal måtte merkes for å leses.

For å få til dette har jeg brukt (CSS3 pseudo-element) ::selection.

Tanken var at jeg bruker 0pacity (0) for å gjøre teksten helt usynlig når den ikke er merket, og ::selection opacity 1.0 for å gjøre den synlig når det er merket.

 

Så langt har jeg ikke fått ::selection og opacity til å fungere sammen.

Noen som vet hva jeg kan gjøre? (Jeg kan selvfølgelig løse det delvis ved å ikke bruke opacity, men samme farge som bakgrunnsfargen, men da kan ikke teksten legge seg over bider og fortsatt være usynlig.)

 

 

Fra css filen:

 

 

.oneColLiqCtrHdr #container #header2 p #highlight {

opacity: 0.0;

font-family: Georgia, "Times New Roman", Times, serif;

color: #FFF;

font-size: 0.8em;

font-weight: normal;

font-variant: normal;

line-height: 25px;

font-style: normal;

text-align: justify;

cursor: text;

}

.oneColLiqCtrHdr #container #header2 p #highlight::selection {

opacity: 1.0;

color: #000;

font-size: 0.8em;

font-weight: normal;

font-variant: normal;

line-height: 25px;

font-style: normal;

text-align: justify;

cursor: text;

}

Endret 12. mars 2010 av sigvald68

[Skagen]

Merk at Internet Explorer, som har den største markedsandelen av nettlesere, ikke støtter ::selction. Og i Gecko (som bl.a FireFox er bygget på) må man bruke moz-prefikset siden støtten er eksperimental: en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)

 

Ellers så trenger du ikke deklarere alt på nytt for selection, kun det som endrer seg, f.eks opacity og color:

 

.oneColLiqCtrHdr #container #header2 p #highlight::selection {

opacity: 1.0;

color: #000;

}

 

En alternativ løsning kan være :focus som betyr at brukeren må klikke inni f.eks div-taggen med teksten for at den skal bli synlig.