Hover does not work in div

Question

Hover does not work in div

Navigation

#1 by (6 votes)
#2 by (5 votes)
#3 by (2 votes)
#4 by (0 votes)

1

I have the following HTML code:

<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 looks like this:

.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;
}

Jquery looks like this:

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

I want, when I hover over produtos , it will apply produtosHover , which will only put a border, a box and a margin-top, I used children because it will have more than an element. I'm going to do it via Jquery because border-color will be manageable by the client.

However, I do not know what's wrong = /

jquery css

asked by anonymous 29.08.2014 / 16:32

4 answers

Calling GridView event in Activity Meta author does not incorporate when sharing on Facebook

score 6 · Answer 1

You do not need jQuery for this, CSS is enough.

Change

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

for

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

Example: link

score 5 · Answer 2

If I understand correctly, you want to apply the class .produtosHover to .produtos ?

If this is the case, you should use addClass and removeClass , because show and hide work on already existing elements only.

Solution:

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

Do not forget to take display: none of .productsHover to take the test.

score 2 · Answer 3

First you have an error in the class produtosHover of css. You must remove display: none; .

Second, just add the following css classes:

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

Here's an example online: LINK

score 0 · Answer 4

Just include a small block <style> in the HTML containing the editable property, and the rest in CSS, like this:

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;
}

See working in JSFiddle