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.
Eu vou fazer via Jquery, pois o border-color
será gerenciável pelo cliente.
Porém, não sei o que está errado =/
.produtosHover