Member Avatar for veledrom

Hi,

This line is not validated in HTML validator. How can solve this problem. onMouseOver and onMouseOut

Thanks

<td onMouseOver="this.style.backgroundColor='#AEBCFF'" onMouseOut="this.style.backgroundColor='#FFFFFF'">sdsdsad</td>
  • 2 Contributors
  • 2 Replies
  • 80 Views
  • 23 Hours Discussion Span
  • Latest Post Latest Post by veledrom

Dani AI

Generated

Short answer: the validator likely complained because of inline event usage and/or case-sensitivity in an XHTML doctype. As pointed out, using CSS for hover is the cleanest solution for modern browsers. As observed, older Internet Explorer versions do not apply the CSS :hover rule to arbitrary elements, so a small, unobtrusive JavaScript fallback is a practical fix.

Keep markup valid by removing inline handlers or using the correct lowercase event names in XHTML. Put presentation in CSS and add behavior with separate JS that toggles a class on mouseover/mouseout. The class-based approach preserves separation of concerns and works in browsers that support :hover (use CSS for those) while the script fixes older IE.

Example CSS + small cross-browser script to add a hover class to table cells:

td.hover {
  background-color: #dfeeff;
}
(function(){
  function addEvent(el,type,fn){
    if(el.addEventListener) el.addEventListener(type,fn,false);
    else if(el.attachEvent) el.attachEvent('on'+type,fn);
    else el['on'+type]=fn;
  }
  var tds=document.getElementsByTagName('td');
  for(var i=0;i<tds.length;i++){
    (function(td){
      addEvent(td,'mouseover',function(){ td.className=(td.className+' hover').replace(/\s+/g,' ').replace(/^\s+|\s+$/g,''); });
      addEvent(td,'mouseout', function(){ td.className=td.className.replace(/\bhover\b/g,'').replace(/\s+/g,' ').replace(/^\s+|\s+$/g,''); });
    })(tds[i]);
  }
})();

Notes: test with the W3C validator (validator.w3.org) after changes. For accessibility, ensure keyboard focus styles or use real interactive elements (links/buttons) if the cells are actionable. For IE6-only environments, a conditional-commented script can target that browser specifically.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

in your css file or between the <style></style> tags in the header if using inline styles

td:hover {background:#aebcff;}
td {background:#ffffff;}

and your html is just

<td>sdsdsad</td>

& javascript may be disabled in the client browser
individual javascripts in elements are unneccessary

Member Avatar for veledrom

Hi,
This doesn't work in IE. How can i make it work in all browsers?
Thanks

<html>
<head>
<style>
td:hover {
	background-color:#aebcff;
}td {
	background-color:#ffffff;
}
</style>
</head>

<body>
<table width="200" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.