Jump to content

why is hover disabled?


mwbarry

Recommended Posts

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

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 instead
active_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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...