CSS-将鼠标悬停在另一个悬停上

Question

我想知道是否有可能触发该CSS中的最后一个悬停以及第二个悬停：

    methods:{
        updatePassword(){
             this.form.post(`/data/password/update/${this.$parent.userId}`)
                .then((response) => {
                    if(response.data === 'success'){
                        Swal.fire(
                            'Update',
                            'Password Updated Successfully',
                            'success'
                        );
                    }
                })
            })
        },
    },

我注意到第三次悬停在很小的区域上触发，导致

而不是

HTML：

.social-menu ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(0, -10px);
}

.social-menu ul li:nth-child(1) a:hover {
    background-color: #007bb5;
}

.social-menu ul li .fa:hover {
    color: #ffffff;
}

Answer 1

如果您希望进入悬停状态的第二个元素是主要元素的子元素或兄弟元素，则可以添加一条规则来定位主要元素的悬停状态，并向第二个元素应用相同的样式直接悬停在次要元素上。

父母子女

.parent-element：hover .hovering-child， .hovering-child：hover {background-color：red; }

同级

.element：hover〜.sibling， .sibling：hover {background-color：red; }

以您的情况为准：而不是第三个添加此

.social-menu ul li a:hover .fa {
    color: #ffffff;
}

如果您只想影响列表中的第一项：

.social-menu ul li:nth-child(1) a:hover .fa {
    color: #ffffff;
}

Answer 2

如果我对您的理解正确，则希望在悬停i时进行互动a

.social-menu ul li a:hover {
    transform: rotate(0deg) skew(0deg) translate(0, -10px);
}

.social-menu ul li:nth-child(1) a:hover {
    background-color: #007bb5;
}

.social-menu ul li:nth-child(1) a:hover .fa {
    color: #ffffff;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="social-menu">
  <ul>
    <li><a href="https://www.linkedin.com/in/akhacklander/"><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>