img src and onmousehover in css3

Question

是否可以在CSS3中为src ， onmouseout和onmousehover创建一个类？

<img src="http://www.somesite.com//images/g.png" onmouseout="this.src = 'http://www.somesite.com/images/g.png'"  onmouseover="this.src = 'http://www.somesite.com/images/g-colored.png'" />

Answer 1

You can use the :hover pseudo-rule as well as the background style attribute with the url() function to accomplish this. Start by using some sort of "blank" tag, then use something like this:

#my_tag_id
{
  background: url('/some/url/to/the/default/image.png');
}

#my_tag_id:hover
{
  background: url('/some/url/to/the/hover/image.png');
}

This would not use the src attribute of the img tag, per se, but has the same effect without any Javascript