Skip to main content
adicionou 79 caracteres ao conteúdo
Fonte Link
Felipe Viero Goulart
  • 3,8mil
  • 17
  • 73
  • 106

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

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

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

Fonte Link
Felipe Viero Goulart
  • 3,8mil
  • 17
  • 73
  • 106

Hover não funciona em div

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