如何同时悬停两个元素？答案

【问题标题】：How I can hover two elements at the same time?如何同时悬停两个元素？
【发布时间】：2017-02-21 07:32:38
【问题描述】：

我想让这些元素同时悬停：..span class="glyphicon glyphicon-link icon-top.. and ..a href="javascript:;" class="link1" This is a text ..

请帮帮我。

// 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>

【问题讨论】：

您是否考虑过将:hover 放在li 上？

标签： html css css-selectors

【解决方案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;
}

【讨论】：