Change font color onmouseover

I have a bunch of asp.net labels. I change the text color to blue with onmouseover="this.style.color='blue';" and I change it back to black with onmouseout="this.style.color='black';"

I would like to keep this functionality but also when the label text is clicked, I want it to remain blue. The mouseover effects will still funtion but if I click a different label, the current one will go to black and the new one will be blue.

I already have a function attached to the onclick event as well.

Can this be done?
LVL 3
yourbudweiserAsked:
Who is Participating?
 
basicinstinctConnect With a Mentor Commented:
this demonstrates the code to use:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <script type="text/javascript">
            var persist;
            function checkcolor(obj)
            {
                  if(obj != persist)
                  obj.style.color = 'black';
            }
            
            function persistThis(obj)
            {
                  if(persist != null)
                  persist.style.color = 'black';
                  persist = obj;
            }
      </script>
</head>
<body>
      <span onmouseout="checkcolor(this);" onmouseover="this.style.color='blue';" onclick="persistThis(this);">Hello</span>
      <span onmouseout="checkcolor(this);" onmouseover="this.style.color='blue';" onclick="persistThis(this);">Farewell</span>
      <span onmouseout="checkcolor(this);" onmouseover="this.style.color='blue';" onclick="persistThis(this);">Aufwiedersehen</span>
      <span onmouseout="checkcolor(this);" onmouseover="this.style.color='blue';" onclick="persistThis(this);">Goodbye</span>
</body>
</html>
0
 
TNameCommented:
This is somewhat different, as it uses LIs, css hover instead of onmouseover, and the js triggers the stay-clicked effect by changing the css class of the elements, but the basic functionality is pretty much the one described by you (if I understand it correctly):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script>
function changeCol(obj){    
  var links = document.getElementsByTagName('A');
   for (var i=0; i<links.length; i++) {
     if (links[i].className=='highlighted' && links[i] != obj)  
           links[i].className='plain';  
  }
  obj.className='highlighted';
}
</script>
<style>
#content {width:300px; overflow:hidden; margin:0 auto;}
ul#tabs {float:left; width:240px; list-style: none;  margin:0; padding:0; height:20px;}
ul#tabs li {list-style: none; display:inline; float:left; margin:0 4px; }

ul#tabs li a,
a.plain {display:block; background:#fff; color:#000; }

ul#tabs li a:hover,
ul#tabs li a.highlighted  {background:#abc; color:#00f;}
</style>
</head>
<body>
<div id="content">
    <ul id="tabs">
       <li><a class="plain" href="#" onclick="changeCol(this);">Tab one</a></li>
       <li><a class="plain" href="#" onclick="changeCol(this); ">Tab two</a></li>
       <li><a class="plain" href="#" onclick="changeCol(this);">Tab three</a></li>
    </ul>
</div>
</body>
</html>
0
 
ZvonkoSystems architectCommented:
How about this:


<html>
<head>
<title>Zvonko &#42;</title>
<style>
li.blue {
  background-color: cornflowerblue;
}
</style>
<script>
var lAct;
function doHover(theLink){
  theLink.className="blue";
}
function doLeave(theLink){
  if(lAct!=theLink){
    theLink.className="";
  }
}
function setLink(theLink){
  if(lAct) lAct.className="";
  lAct=theLink;
  lAct.className="blue";
}
</script>
</head>
<body>
<ul>
<li onmouseover="doHover(this)" onmouseout="doLeave(this)" onClick="setLink(this)" >One</li>
<li onmouseover="doHover(this)" onmouseout="doLeave(this)" onClick="setLink(this)" >Two</li>
<li onmouseover="doHover(this)" onmouseout="doLeave(this)" onClick="setLink(this)" >Three</li>
<li onmouseover="doHover(this)" onmouseout="doLeave(this)" onClick="setLink(this)" >Four</li>
<li onmouseover="doHover(this)" onmouseout="doLeave(this)" onClick="setLink(this)" >Five</li>
</ul>
</body>
</html>



0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
TNameCommented:
Sorry, hadn't seen basicinstinct's post, should have refreshed...
0
 
basicinstinctCommented:
lol @ cornflowerblue
0
 
ZvonkoSystems architectCommented:
:)
0
 
basicinstinctCommented:
yours is quite different to mine tho tname, certainly worth posting alongside mine as it gives yourbudweiser more options to consider...
0
 
yourbudweiserAuthor Commented:
these look great, thanks so much for responding. i'll need some time to check out the code.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.