Avatar billede dehaas Nybegynder
01. januar 2007 - 16:19 Der 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.
Avatar billede mclemens Nybegynder
01. januar 2007 - 16:36 #1
<!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">

</head><body>

<img src="http://www.eksperten.dk/img/elogo.png" onmouseover="this.style.width='250px';"  onmouseout="this.style.width='99px';"><br><br>


<div style="width:500px;height:100px;background-image:url('http://www.eksperten.dk/img/elogo.png');" onmouseover="this.style.backgroundImage='url(\'http://www.eksperten.dk/img/flag_green.gif\')';"  onmouseout="this.style.backgroundImage='url(\'http://www.eksperten.dk/img/elogo.png\')';"></div>

</body></html>
Avatar billede mclemens Nybegynder
01. januar 2007 - 16:46 #2
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">

<style type="text/css">
#i:hover {width:250px;}
#d {height:100px;width:500px;background-image:url('http://www.eksperten.dk/img/elogo.png');}
#d:hover {background-image:url('http://www.eksperten.dk/img/flag_green.gif');}
</style>

</head><body>

<img id="i" src="http://www.eksperten.dk/img/elogo.png"><br><br>

<div id="d"></div>

</body></html>
Avatar billede mclemens Nybegynder
01. januar 2007 - 16:47 #3
Edit: Når man kan regne med at flertallet kører IE7 går det lettere:
- Eller Firefox eller anden browser der understøtter mere css :)
Avatar billede elskermad.dk Nybegynder
01. januar 2007 - 17:24 #4
bliver :hover accepteret korrekt i IE7? så det ikke kun er a det virker på?
Avatar billede elskermad.dk Nybegynder
01. januar 2007 - 17:24 #5
eller brug denne behavior, så virker hover korrekt altid:

<attach event="ondocumentready" handler="parseStylesheets" />
<script>

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
    onhover:{on:'onmouseover', off:'onmouseout'},
    onactive:{on:'onmousedown', off:'onmouseup'},
    onunknown:{on:'onfocus', off:'onblur'}
}

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;

        currentSheet.addRule(newSelect, style);
        for(var i=0; i<elements.length; i++)
            new HoverElement(elements[i], className, activators[pseudo]);
    }

function HoverElement(node, className, events) {
    if(!node.hovers) node.hovers = {};
    if(node.hovers[className]) return;
    node.hovers[className] = true;
    hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
    hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
    function hookHoverEvent(node, type, handler) {
        node.attachEvent(type, handler);
        hoverEvents[hoverEvents.length] = {
            node:node, type:type, handler:handler
        };
    }

    function unhookHoverEvents() {
        for(var e,i=0; i<hoverEvents.length; i++) {
            e = hoverEvents[i];
            e.node.detachEvent(e.type, e.handler);
        }
    }

function getElementsBySelect(rule) {
    var parts, nodes = [doc];
    parts = rule.split(' ');
    for(var i=0; i<parts.length; i++) {
        nodes = getSelectedNodes(parts[i], nodes);
    }    return nodes;
}
    function getSelectedNodes(select, elements) {
        var result, node, nodes = [];
        var identify = (/\#([a-z0-9_-]+)/i).exec(select);
        if(identify) {
            var element = doc.getElementById(identify[1]);
            return element? [element]:nodes;
        }
       
        var classname = (/\.([a-z0-9_-]+)/i).exec(select);
        var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
        var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
        for(var i=0; i<elements.length; i++) {
            result = tagName? elements[i].all.tags(tagName):elements[i].all;
            for(var j=0; j<result.length; j++) {
                node = result[j];
                if(classReg && !classReg.test(node.className)) continue;
                nodes[nodes.length] = node;
            }
        }   
       
        return nodes;
    }
</script>
Avatar billede mclemens Nybegynder
01. januar 2007 - 17:41 #6
Elskermad.dk, Ja når vi kun skal tage hensyn til IE7 bliver
tingene lettere :hover skulle også virke såvidt jeg husker :D

... Husk credits m.v. når man bruger andres script ? ...

To relevante links:
http://www.xs4all.nl/~peterned/csshover.html
http://www.xs4all.nl/~peterned/htc/csshover2.htc

- 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 ...
Avatar billede dehaas Nybegynder
01. januar 2007 - 21:30 #7
Mange tak for hjælpen, det fungerer lige som det skal.
Avatar billede mclemens Nybegynder
01. januar 2007 - 21:32 #8
Velbekom, og tak for point :)
Avatar billede elskermad.dk Nybegynder
01. januar 2007 - 23:32 #9
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",)
Avatar billede olebole Juniormester
02. januar 2007 - 14:40 #10
<ole>

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)

/mvh
</bole<
Avatar billede elskermad.dk Nybegynder
02. januar 2007 - 16:12 #11
ole:
men hvis man *skal* bruge :hover funktionen på andre elementer end a er der vel ikke andre muligheder end class-skiftet? :S
Avatar billede mclemens Nybegynder
06. januar 2007 - 16:45 #12
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.

(havde glemt at abonnere på denne)
Avatar billede elskermad.dk Nybegynder
06. januar 2007 - 17:03 #13
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?
Avatar billede mclemens Nybegynder
06. januar 2007 - 17:13 #14
FF skifter ikke nogen klasse
- det er scriptet der gør.

behavior:url("../htc/csshover.htc");
-> IE som kører jscript og laver et class
skifte ved onmouseover for at simulere :focus

... FF kører ikke behavior'en ...
Avatar billede elskermad.dk Nybegynder
06. januar 2007 - 18:09 #15
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
Avatar billede mclemens Nybegynder
06. januar 2007 - 18:22 #16
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>
Avatar billede olebole Juniormester
09. januar 2007 - 10:48 #17
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)
Avatar billede elskermad.dk Nybegynder
09. januar 2007 - 15:36 #18
okay rart lige at få slået på plads :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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