Question

我制作了一个网格容器，用于进行页面组织（由于缺乏更好的用语），其中之一是联系页面，其html代码如下所示：

<div class="grid-contact"> <img class="socials" src="facebook.png" alt="fb"> Contact </div>

div和img的css代码如下所示

.grid-contact{
    border: 1px solid black;
    writing-mode: vertical-lr;
    font-size: 30px;
    transform: rotate(180deg);
    text-align: center;
    width: 65px;
    transition: width 0.5s, font-size 0.5s;
}

.socials{
    transform: rotate(180deg);
    height: 2.56px;
    width: 2.56px;
    position: absolute;
    top: 45%;
    right: 2px;
    transition: width 0.5s, height 0.5s;
}

我设想过这样，当您将鼠标悬停在联系人文本上时，它将滑出，所有的社交媒体徽标都会变大，而我正是用这两个悬停css块做了我想要做的事情：

.grid-contact:hover{
    display: inherit;
    width: 130px;
    font-size: 65px;
}

.socials:hover{
    height: 25.6px;
    width: 25.6px;
}

但是，我不知道如何将鼠标悬停在“联系人”文本上时触发这两个动画。

我也想像这样做，因为徽标非常小，然后仅在悬停时更改其大小可能是完全错误的，但这是我唯一想到的，如果您认为可以有一个更简单的解决方案请告诉我。另外，我也一直在学习javascript，所以如果有办法也可以用js来做，那我也很高兴。

我希望有人能提供帮助。

Answer 1

如果我了解您的问题，您可以做这样的事情：

.grid-contact:hover{
    display: inherit;
    width: 130px;
    font-size: 65px;
}
.grid-contact:hover > .socials {
    height: 25.6px;
    width: 25.6px;
}

在悬停时触发两个元素的动画

1 个答案: