css - 仅在父级上的 CSS 灰度过滤器

Question

我有一个带有 bg 彩色图像的父 div。里面有一个带有
另一个img的A标签。在父母悬停时，希望父母去黑白，但孩子保持其颜色。
的HTML：

<div class="hp_frame " style="background-image:url(parent.jpg');">
<a href="#"><img src="button.png" /></a></div>  

的CSS：

.hp_frame:hover{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);
/*filter: url(filters.svg#grayscale);  Firefox 3.5+ */
filter:gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */    

发生
的事情是 A 标记的图像也是黑白的，所以我
只添加了将 CSS 图像灰度属性应用于父级
：
.hp_frame:hover a{
filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%);
}

唉，这并没有解决它..有什么想法吗？
感谢，并有一个愉快的一天 ：-）