Tenho o seguinte código HTML: <li style="background-image: url(fotoSYS)" class="produtos f-left margin-right-30 margin-top-30"> <div style="background-color:codigoSYS"class="marcador"></div> <h2>tituloSYS</h2> </li> O CSS está assim: .produtos{ width: 294px; height: 349px; background-color: #f1f2f2; border: 3px solid transparent; position: relative; cursor: pointer; transition: all .4s ease-out; } .produtosHover{ border-color: #dddb00; box-shadow: 0 0 25px gray; margin-top: 15px; display: none; } O Jquery está assim: $(".produtos").hover( function() { $(this).children(".produtosHover").show(); }, function() { $(this).children(".produtosHover").hide(); } ); Eu quero, que quando eu passe o mouse em cima de `produtos`, ele aplique o `produtosHover`, que irá apenas colocar uma borda, um box e um margin-top, usei o `children` pois terá mais de um elemento. Porém, não sei o que está errado =/