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/

具有相同类问题的倍数ID

1 个答案: