html - 具有相同班级问题的多个ID

Question

我正在尝试将悬停动作应用于具有不同 id 的多个元素，但边距和背景位置不会改变，但是当我为每个 id 使用相同的代码时它工作正常，任何人都可以帮助我吗？提前致谢！！

<li id='gostou' class='menuacao' title="Gostou do Filme?">
     <a class='link' href="" target="_blank"></a>
</li>

<li id='assistir' class='menuacao' title="Gostou do Filme?">
     <a class='link' href="" target="_blank"></a>
</li>

CSS看起来像这样

#gostou {
    background: transparent url('img/trailer.png');
    margin: 5px 2px;
}

#assistir {
    background: transparent url('img/tags.png');
    margin: 5px 2px;
}

.menuacao {
    background-position: left;
    height: 40px;
    width: 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    list-style: none;
    cursor: pointer; 
}

.menuacao:hover {
    margin: 5px -5px;
    background-position: -80px;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}

Answer 1

:hover您应该使用逗号分隔多个选择器并为每个选择器重复，如下所示：

#gostou:hover, #assistir:hover {
    margin: 5px -5px;
    background-position: -80px;
}

看到这个小提琴：http: //jsfiddle.net/vovkss/reNcu/