shaffiq_fiq88 Posted March 6, 2015 Share Posted March 6, 2015 (edited) <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.sectionseparator { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 0px;}.sectionseparator:hover { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 101px;}.sectionseparator.open { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 27px;}.sectionseparator.open:hover { background-image:url(/asset/image/accordion_icon_sprite.png); background-position:0px 64px;}</style><script language="javascript" type="text/javascript">function imgHover(o){ //what script shoud I put here??};function showHideInfo(o){ //Don't worry about this. Already done.};</script></head><body><a id="section-spg" href="#" onClick="showHideInfo(this);" onMouseOver="imgHover(this);"><img id="section-spg-img" src="/asset/image/invis.gif" width="27" height="27" class="sectionseparator" style=" position:absolute;margin-top:5px;"> <div style="display:inline-block; position: relative; top:6px; left:35px;">SPG</div></a><div id="spg-info">SPG Info</div></body></html> I want background image of 'section-spg-img' changed as 'sectionseparator:hover' when I hover mouse in any region within 'section-spg'. I've searching and try every event method. Either I'm stupid enough and failed or I'm not understand anything about event. Image sprite contain {+,hovered +, -, hovered -}. showHideInfo() change either + or - of the image and show or hide 'spg-info'. (success) imgHover() change either hovered + or hovered - of the image. (failed) Example : http://www.microsoft.com/en-us/download/details.aspx?id=30653 (Detail, System Requirement, etc...) I don't wanna use jQuery. Thank you. Edited March 6, 2015 by Fiq Link to comment Share on other sites More sharing options...
davej Posted March 6, 2015 Share Posted March 6, 2015 Simpler example maybe? We don't have your images. Try... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+' Column: '+d);return true;}</script><style>#div1{ background-color: gray; width:100px; height:100px; border:1px solid #bbb;}#div1:hover{ background-color: pink;}#div2{ width:30px; height:30px; border:1px solid #bbb;}.div2i{background-color: #ccc;}.div2h{background-color: orange;}.div2c{background-color: yellow;}</style><script>function showHover(o){ document.getElementById('debug').innerHTML += '[hover:' + o.id + '] '; document.getElementById('div2').className = 'div2h';}function showClick(o){ document.getElementById('debug').innerHTML += '[click:' + o.id + '] '; document.getElementById('div2').className = 'div2c';}</script></head><body><div id="div1" onClick="showClick(this);" onMouseOver="showHover(this);"><div id="div2" class="div2i"></div></div><hr/><div id="debug"></div></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted March 6, 2015 Share Posted March 6, 2015 You can't add a pseudo class like :hover to an element using Javascript. What you can do is give the hover rules an additional class name and then add and remove that class to the other elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now