Hover does not work in div

Asked

Viewed 405 times

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>

The CSS is 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 is like this:

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

I want, that when I hover over produtos, he applies the produtosHover, that will just put an edge, a box and a margin-top, I used the children because it will have more than one element. I’ll do via Jquery, for the border-color will be manageable by the customer.

But I don’t know what’s wrong =/

jquery css
  • 1

    Where is the element with class . products?

  • Felipe, can you fix the HTML to make the question clearer? I don’t see any class .produtosHover

4 answers

6

You don’t 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: http://jsfiddle.net/gcf82uLu/

  • 3

    I’d rather do it that way, without the jQuery, only with CSS!

  • I had done it that way, quiet. What happens is that this border color, the border-color, will be manageable by the customer, I forgot to comment on this in the post.

  • @Felipestoker, in this case even with addClass the thing there goes. How does the customer choose the color?

  • There is a reserved word called codigoSYS, that in the manager will be the field "COLOR", and there the client will put the color in hexadecimal. I think I’ll have to do this inline even.

  • In fact, to change the color, you will need a more specialized JS, or generate CSS dynamically, which would give problems with caching. Best for an inline style for color, and leave only the other details in the class.

  • So I guess I’ll leave the inline style="border-color:#dddb00" and the other settings, and add a class. When you mouse over, I will try a css via jquery

  • @Felipestoker there is some refresh of the page between the client insert the color and the Hover? otherwise it could make this style right on the server side

  • No. The customer will register a product by the manager. And in this manager, in addition to the image and description fields, there is the field cor, which is the codigoSYS which is in my PHP. It inserts and will always be there, no refresh.

  • @Felipestoker could have one <style> on the page that changes the content with jQuery/regex when the color is inserted. So it would change directly in the css of the Hover. But maybe it’s more practical to do this inline.

  • does it work with attributes?

  • @Felipestoker style inline is better

  • And how could I do that, with the code I already own?

  • @Felipestoker put the html of this input into the color

  • Input? What do you mean?

  • @Felipestoker, I meant code relegated to "e lá o cliente irá colocar a cor em hexadecimal". To set an example.

  • Got it. : <div style="border-color:codigoSYS"class="marcador"></div>, i.e., the border-color inline, has the codigoSYS that receives the hexadecimal value that the client will inform in the manager.

  • Hmmm, and the code that changes that codigoSYS decimal`? client writes by hand or chooses in combo/select?

Show 12 more comments

5

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

If this is it, you must use it addClass and removeClass, for show and hide work on existing elements only.

Solution:

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

Don’t forget to take the display: none do. productsHover to make the test.

  • 1

    Also look at @Sergio’s solution, because if you don’t need older IE compatibility (which only accepts anchor :Hover), it’s simpler than Jquery.

2

First you have a mistake in class produtosHover css. You must remove the display: none;.

Second, just add the css classes as follows:

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

I leave here online example: LINK

  • @Bacco has already responded in the same way as yours, is identical!

  • Yes, but before he edited the question he had $(this).addClass("produtosHover").show() and $(this).removeClass("produtosHover").hide();, what is wrong... In his reply there was still no reference to display: none; before editing, which makes mine valid and correct :)

  • Right! I didn’t see it. @Cesarmiguel (:

  • Certo @Exception ;)

  • The none I actually put it on after, but the show and I corrected it immediately after the post, and well before that answer (not that it makes any difference now).

0

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

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 on Jsfiddle

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.