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 =/