我有一个页面，我有一个Wordpress插件WPDATATABLES，使用HTML来显示我从各种网站(importXML)中提取的一些信息。这个想法是让页面看起来像这样 https://www.labelradar.com/labels/chillyourmind/profile，当您将鼠标悬停在特定元素上时，整个元素都会做出反应并变成带有社交媒体图标主色的白色徽标。目前，我能够让所有的CSS工作，除了一个小细节，那就是白色图标。仅当您在图标的图像轮廓范围内时，它才会更改。
这是页面： https://trapparty.net/theparty/
我知道当我将鼠标悬停在控制整个事情的最外层div 元素上时，一定有某种方法可以迫使div 同时做出反应。这是我正在使用的整个CSS代码的pastbin：
https://www.pastiebin.com/5cf313feb2753
下面是一个带有嵌套 DIV 元素的 HTML 元素。
我尝试组合一些这样的 CSS 来尝试在外部调用div：
.soundcloud.soundcloudicon .soundcloudwhite {
display: none;
position: absolute;
top: 0px;
left: 0;
z-index: 99;
}
<center><a href="https://www.instagram.com/thetrapparty/" target="_blank"><div class="instagram"><div class="instagramicon">
<center><img src="https://www.trapparty.net/wp-content/followicons/instagram.png" height="263" width="178" alt="instagram">
</center>
<center><img src="https://www.trapparty.net/wp-content/followicons/instagramwhite.png" height="263" width="178" class="instagramwhite" alt="instagramwhite"></center>
</div>
<div class="igcount"><h2><center><font color="white">47.4k</font></center></h2></div>
<div class="followerstextig">Followers</div></div></a></center>
我想要的实际结果可以在上面的标签雷达链接中看到，但本质上，我希望每当我将鼠标悬停在整个外部div 元素上时，都会显示白色图标。
阅读标题，它将是这样的：
div img {
border: 1px solid black;
}
div:hover img {
border: 1px solid red;
}