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;
}

请参阅此 fiddle :http://jsfiddle.net/vovkss/reNcu/