html - multiples ids with same class issue -
i'm trying apply hover action multiple elements different ids, margin , background position don't change, when use same code each id works fine, can me? in advance!!
<li id='gostou' class='menuacao' title="gostou filme?"> <a class='link' href="" target="_blank"></a> </li> <li id='assistir' class='menuacao' title="gostou filme?"> <a class='link' href="" target="_blank"></a> </li>
the css looks this
#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: 0.2s ease-in-out; list-style: none; cursor: pointer; } .menuacao:hover { margin: 5px -5px; background-position: -80px; -webkit-transition: 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; }
you should separate multiple selectors commas , repeat :hover
each selector, this:
#gostou:hover, #assistir:hover { margin: 5px -5px; background-position: -80px; }
see fiddle: http://jsfiddle.net/vovkss/rencu/
Comments
Post a Comment