我怎么能同时盘旋两个元素？

Question

我想要同时盘旋theese元素：.. span class =“glyphicon glyphicon-link icon-top ..和..a href =”javascript：;“class =”link1“这是一篇文章..

请帮助我。

// Dont run this snippet :) I used it to paste me code  \\

.top-part > .top-left-part > ul {
    list-style: none;
}

.top-part > .top-left-part > ul > li {
    display: inline-block;
}

.top-part > .top-left-part > ul > li > .link1 {
    color: white;
    transition: all 0.3s ease;
}

.top-part > .top-left-part > ul > li > .link1 {
    color: white;
    text-decoration: none;
}

.top-part > .top-left-part > ul > li > .link1:hover {
    color: #2ECC71;
    text-decoration: none;
}

.top-part > .top-left-part > ul > li > .icon-top {
    color: white;
    background-color: #555;
    border-radius: 200px;
    padding: 7px;
    margin: 0 2.5px;
    transition: all 0.3s ease;
}

.top-part > .top-left-part > ul > li > .icon-top:hover {
    background-color: #2ECC71;
}

<ul>
                            <li><span class="glyphicon glyphicon-link icon-top"></span>    
                            <a href="javascript:;" class="link1">
                                info@mccore.ml
                            </a></li>
                            <li><span class="glyphicon glyphicon-envelope icon-top"></span>
                            <a href="javascript:;" class="link1">
                                Kapcsolat
                            </a></li>
                        </ul>

Answer 1

在这种情况下，这些是li元素中包含的唯一元素。因此，您只需将悬停样式应用于li：

即可

.top-part > .top-left-part > ul > li:hover {
  ...
}

然后，您可以在悬停期间通过扩展选择器来定位各个元素：

.top-part > .top-left-part > ul > li:hover > .link1 {
    color: #2ECC71;
    text-decoration: none;
}

.top-part > .top-left-part > ul > li:hover > .icon-top {
    background-color: #2ECC71;
}