Java脚本悬停在包含图片和文本+开关颜色的框上

Question

我正试图用图片和文字悬停在盒子上。

我想强制JS / css在鼠标指针在框上时改变框（div）和文本的颜色（如下面链接上的图像）。所以应该在图像上悬停+同时在图像上的文字+更改文本和图标的颜色 - 日历+评论（或用白色图标切换图标）。

我尝试使用SVG过滤器和css不透明度进行悬停（图像悬停工作正常），但是文本颜色存在问题，当然还有图像上的其他文本。我还尝试使用鼠标悬停的Java脚本，但仍然没有...

想象它应该如何运作：

http://szkolajezykowakola.vxm.pl/st.jpg

简单div

<div class="boxentry">

Css - 灰度测试

.boxentry: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 1 0 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
  filter: gray; 
  -webkit-filter: grayscale(100%); 
}