The inline event should be added on every element you want it to work.
Alternatively, we can add a script that would identify the span element of your desire.
I suggest give those span element a class name like:
Code:
<span class="special">
This will have the onmouseover and onmouseout event
</span>
The above code has a class name of
special.
We can take advantage of that. First, have this stylesheet:
Code:
<style type="text/css">
.special{
color:#123456;}
.special:hover{
color:#fff;
}
</style>
..but that won't work well with IE.
You need Javascript:
Code:
<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function()
{
ray.setSpecial('special'); // Pass the class name of the element
},false):
window.attachEvent('onload',function()
{
ray.setSpecial('special'); // Pass the class name of the element
}); // FF : IE
var ray=
{
setSpecial:function(clsNme)
{
var classEl = this.getClass(clsNme);
for(var i=0;i<classEl.length;i++)
{
classEl[i].onmouseover=function()
{
this.style.color='#fff'; // Turn the color to white
}
classEl[i].onmouseout=function()
{
this.style.color='#123456'; // Turn the color to hexadecimal equivalent.
}
}
},
getClass:function(classEl)
{
var els=document.getElementsByTagName('*'); // Get all elements
var classArr = [] ; // Declare empty array
var regExp = new RegExp('\\b'+classEl+'\\b'); // Class Element RegExp
for(var i=0;i<els.length;i++)
{
if (regExp.test(els[i].className)) // If match on regExp
classArr.push(els[i]); // Add into classArr array
} // End of for loop
return classArr; // Return the array;
}
}
</script>
Hope that helps.
