01. januar 2007 - 16:19Der er
17 kommentarer og 1 løsning
Ændre css-style ved hover
Hej,
Jeg er bestemt ikke god til JavaScript, så jeg søger en simpel løsning til at ændre en css-style (eksempelvis width, eller background-image) når man fører musen over et billede.
Denne side indeholder artikler med forskellige perspektiver på Identity & Access Management i private og offentlige organisationer. Artiklerne behandler aktuelle IAM-emner og leveres af producenter, rådgivere og implementeringspartnere.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title><meta name="robots" content="index, follow">
Når man kan regne med at flertallet kører IE7 går det lettere:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title><meta name="robots" content="index, follow">
function parseStylesheets() { if(!/MSIE (5|6)/.test(navigator.userAgent)) return; window.attachEvent('onunload', unhookHoverEvents); var sheets = doc.styleSheets, l = sheets.length; for(var i=0; i<l; i++) parseStylesheet(sheets[i]); } function parseStylesheet(sheet) { if(sheet.imports) { try { var imports = sheet.imports, l = imports.length; for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]); } catch(securityException){} }
try { var rules = (currentSheet = sheet).rules, l = rules.length; for(var j=0; j<l; j++) parseCSSRule(rules[j]); } catch(securityException){} }
function parseCSSRule(rule) { var select = rule.selectorText, style = rule.style.cssText; if(!csshoverReg.test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1'); var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo); var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1]; var affected = select.replace(/:(hover|active|unknown).*$/, ''); var elements = getElementsBySelect(affected); if(elements.length == 0) return;
- Jeg har kigget på whatever:hover tidligere men har valgt at undlade at bruge det - className switching er ikke så godt som enkelte style switchings ...
det plejer jeg skam også, men det synes jeg ikke der var med der jeg fik det, var også på en eller andet eksperten-lignende side det lå - så sikkert der crediten røg c",)
Jeg vil gerne lige pinde mclemens' kommentar (01/01-2007 17:41:01) lidt ud: Skift af CSS-klasse er noget af det dårligst performende, man overhovedet kan foretage sig i en browser. I ugunstige tilfælde kan det tage op til sekunder at få browseren til at gennemføre et sådan skift ... hvorfor bl.a. MS kraftigt fraråder fremgangsmåden! Skift de enkelte properties på elementets style-objekt ... det er laaaaaangt mere effektivt ;o)
Elskermad, du bruger onmouseover i et script, som du laver specielt til IE, hvor du så switcher styles m.v. via. javascript.
- Det andet script omregner jo :hover til at bruge onmouseover, men hopper over at analysere og switche styles, men baserer sig på class skiftet istedet.
ja det kom jeg også i tanke om efterfølgende, men dvs. at i fx FireFox er det ikke et performensproblem at bruge :hover ? der må den jo også skifte hele classen?
nej det ved jeg godt den ikke gør, men den accepterer jo :hover, som vel også er et skifte af klassen? eller kan den godt regne ud kun at skifte de relevante properties
Umiddelbart ville jeg tro at :hover er nogle ekstra styles som gælder, når man holder musen henover elementet, ligesom div a img {} er udvidede styles der kun gælder billleder i links i divs ... den fjerner / skifter ikke den oprindelige klasse ... Olebole kan nok bedre uddybe hvordan :hover spiller ind på ydeevnen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title><meta name="robots" content="index, follow">
<style type="text/css"> div {font-size:50px;} div:hover {background:#ff0;} </style>
</head><body> <div>FF eksempel - tekst bevares</div> </body></html>
At bruge pseudo-selector'en ':hover' er noget helt andet end at skifte CSS-klasse - og der er slet ikke de performance-problemer, der er med klasse-skift.
Til gengæld kan man sagtens argumentere for, at ':hover' er en grim byld på W3C's arbejde ... også selvom det er en, de selv har fostret (eller i det mindste tilsluttet sig) =)
Hele idéen med W3C's arbejde er jo at dele koden op i: 1) data [XML] 2) markup [(X)HTML] 3) visuel præsentation [CSS] 4) funktionalitet [script]
Udseendet af et link bør helt klart styres af CSS, men når brugeren fører cursoren hen over linket og dette skifter farve, er der tale om en funktionalitet, som retteligt burde styres af script ... men det er en laaaaang debat, der har kørt indenfor W3C i årevis ;o)
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.