Question

我有一个页面，我有一个使用HTML的Wordpress插件WPDATATABLES来显示我从各个站点（importXML）中提取的一些信息。想法是使页面看起来像这样https://www.labelradar.com/labels/chillyourmind/profile，即当您浏览特定元素时，整个元素会做出反应并变为带有社交媒体图标主要颜色的白色徽标。目前，我可以使所有CSS正常工作，只有一个小细节，那就是白色图标。仅当您在图标的图像轮廓范围内时，它才会更改。

以下是页面：https://trapparty.net/theparty/

我知道当我将鼠标悬停在控制整个对象的最外面的div元素上时，必须有某种方式迫使div同时做出反应。这是我正在使用的整个CSS代码的组合：

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元素上时，就显示白色图标。

Answer 1

阅读标题就像：

div img {
  border: 1px solid black;
}

div:hover img {
  border: 1px solid red;
}

如何在另一个div元素中获取图像以对最外面的div元素上的悬停做出反应？

1 个答案: