mwbarry Posted August 13, 2011 Share Posted August 13, 2011 if i have this HTML: <a href="java script:AJAXrequest1" onclick="set_active(this), navoff(this)" class="link" id="link1">link1</a><a href="java script:AJAXrequest2" onclick="set_active(this), navoff(this)" class="link" id="link2">link2</a><a href="java script:AJAXrequest3" onclick="set_active(this), navoff(this)" class="link" id="link3">link3</a> this CSS: .link { text-decoration:none; font-family:helvetica; font-size:14pt; color:#ffffff; letter-spacing:2px; -moz-transition: color 0.6s linear; -webkit-transition: color 0.6s linear; text-shadow:1px -1px 0px #000000;}.link:hover { color:#AAAAAA;} and this JS function: <script type="text/javascript">active_item = false;function set_active(element) { if (active_item) active_item.style.color = '#ffffff'; element.style.color = '#707070'; active_item = element;}</script><script type="text/javascript">function navoff(element) { if (active_item != element) { element.style.color="#ffffff"; }}</script> why does the '.link:hover' stop working after a link has been selected?page loads: everything works fine.select link1: everything works fine.select link2: link1 hover no longer worksselect link3: both link1 and link2 hover no longer worksetc... Link to comment Share on other sites More sharing options...
dsonesuk Posted August 13, 2011 Share Posted August 13, 2011 why does the '.link:hover' stop working after a link has been selected?page loads: everything works fine.select link1: everything works fine.select link2: link1 hover no longer worksselect link3: both link1 and link2 hover no longer worksetc...Because once "active_item.style.color = '#ffffff';" is assigned inline to all of the anchor elements<a href="java script:AJAXrequest1" onclick="set_active(this), navoff(this)" class="link" id="link1" style="color: #ffffff;">link1</a><a href="java script:AJAXrequest2" onclick="set_active(this), navoff(this)" class="link" id="link2" style="color: #ffffff;">link2</a><a href="java script:AJAXrequest3" onclick="set_active(this), navoff(this)" class="link" id="link3" style="color: #ffffff;">link3</a>that color will take precedence of any color set by .link or .link:hover.inline styling within elements have th highest precedence, followed by css styling placed in <head></head>, followed thirdly by external css styling that are linked to.Try assigning a class relating to active and normal state insteadactive_item = false;function set_active(element) {if (active_item) //active_item.style.color = '#ffffff';active_item.className="link";//element.style.color = '#707070';element.className="active_link" active_item = element;} .link, .active_link {color:#fff;text-decoration:none;font-family:helvetica;font-size:14pt;letter-spacing:2px;-moz-transition: color 0.6s linear;-webkit-transition: color 0.6s linear;text-shadow:1px -1px 0px #000000;}.active_link {color:#707070;}.link:hover {color:#AAAAAA;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.