1

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

2
  • 1
    Onde está o elemento com classe .produtosHover no seu código HTML? Commented 29/08/2014 às 14:47
  • Felipe, pode corrigir o HTML para a pergunta ficar mais clara? não vejo nehuma classe .produtosHover
    – Sergio
    Commented 29/08/2014 às 15:50

4 Respostas 4

6

Você não precisa de jQuery para isso, CSS basta.

Mude

.produtosHover{
    border-color: #dddb00;
    box-shadow: 0 0 25px gray;
    margin-top: 15px;
    display: none;
}

para

.produtos:hover {
    border-color: #dddb00;
    box-shadow: 0 0 25px gray;
    margin-top: 15px;
/*  display: none; # isto não precisa  */
}

Exemplo: http://jsfiddle.net/gcf82uLu/

17
  • 3
    Prefiro fazer desse modo, sem o jQuery, apenas com CSS! Commented 29/08/2014 às 15:57
  • Eu havia feito dessa forma, tranquilo. O que acontece, é que essa cor da borda, o border-color, será gerenciável pelo cliente, esqueci de comentar isso no post. Commented 29/08/2014 às 16:04
  • @FelipeStoker, nesse caso nem com o addClass a coisa lá vai. Como é que o cliente escolhe a cor?
    – Sergio
    Commented 29/08/2014 às 16:06
  • Existe uma palavra reservada chamada codigoSYS, que no no gerenciador será o campo "COR", e lá o cliente irá colocar a cor em hexadecimal. Acho que vou ter que fazer isso inline mesmo. Commented 29/08/2014 às 16:07
  • De fato, para mudar a cor, vai precisar de um JS mais especializado, ou gerar o CSS dinamicamente, que daria problemas com cache. Melhor por um style inline pra cor, e deixar só os outros detalhes na classe.
    – Largato
    Commented 29/08/2014 às 16:08
5

Se eu entendi direito, você quer aplicar a classe .produtosHover em .produtos?

Se for isto, deve usar addClass e removeClass, pois show e hide trabalham sobre elementos já existentes apenas.

Solução:

$(".produtos").hover(
  function() {
    $(this).addClass("produtosHover");
  },
  function() {
    $(this).removeClass("produtosHover");
  }
);

Não se esqueça de tirar o display: none do .produtosHover para fazer o teste.

1
  • 1
    Olhe também a solução do @Sergio, pois se não precisar de compatibilidade com IE mais velho (que só aceita :hover em ancora), a dele é mais simples que o JQuery.
    – Largato
    Commented 29/08/2014 às 15:58
2

Primeiro tens um erro na classe produtosHover do css. Tens de remover o display: none;.

Em segundo, basta adicionares da seguinte maneira as classes css:

$(".produtos").hover(
  function() {
    //$(this).children(".produtosHover").show();
    $(this).addClass("produtosHover");
  },
  function() {
    //$(this).children(".produtosHover").hide();
    $(this).removeClass("produtosHover");
  }
);

Deixo aqui exemplo online: LINK

5
  • @Bacco ja respondeu da mesma maneira que a sua, está identico! Commented 29/08/2014 às 15:56
  • Sim, mas antes de ele editar a pergunta tinha $(this).addClass("produtosHover").show() e $(this).removeClass("produtosHover").hide();, o que está errado... Na resposta dele ainda não fazia referência ao display: none; antes da edição, o que torna a minha válida e correta :) Commented 29/08/2014 às 15:58
  • Correto! Não tinha visto. @CesarMiguel (: Commented 29/08/2014 às 15:58
  • Certo @Exception ;) Commented 29/08/2014 às 15:59
  • O none eu de fato pus depois, mas o show e o hide eu corrigi imediatamente depois da postagem, e bem antes desta resposta (não que isso faça nenhuma diferença agora).
    – Largato
    Commented 29/08/2014 às 16:01
0

Basta incluir um pequeno bloco <style> no HTML contendo a propriedade editável, e o restante no CSS, assim:

HTML:

<style>.produtos:hover { border-color: codigoSYS }</style>
<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>

CSS:

.produtos {
    width: 294px;
    height: 349px;
    background-color: #f1f2f2;
    border: 3px solid transparent;
    position: relative;
    cursor: pointer;
    transition: all .4s ease-out;
}
.produtos:hover {
    box-shadow: 0 0 25px gray;
    margin-top: 15px;
}

Veja funcionando no JSFiddle

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .