Hover CSS with JQuery

Question

I want to edit the rendering of an element when hovering. To achieve this, I created a button and I want the first click to set the hover rendering and the second click to reset the hover rendering. Currently, the hover style appears even when I'm not on the div:

$("#editer-script").click(function() {
  var clicks = $(this).data('clicks');

  if (clicks) {
    $('.contenu-editable').mouseover(function(){
        $('.contenu-editable').css("background-color", "transparent");
        $('.contenu-editable .fa.fa-pencil').css("display", "none");
    });
    $("#editer-script").text('Rendre éditable');
  } else {
    $('.contenu-editable').mouseover(function(){
        $('.contenu-editable').css("background-color", "#f4f6f9");
        $('.contenu-editable .fa.fa-pencil').css("display", "inline-block");
    });
    $("#editer-script").text('Ne pas rendre éditable');
  }

  $(this).data("clicks", !clicks);
});

Thank you in advance for your help.

question is not clear

Kiran Shahi
– Kiran Shahi

2018-03-23 10:51:17 +00:00
Commented Mar 23, 2018 at 10:51 — Kiran Shahi
– Kiran Shahi, Commented Mar 23, 2018 at 10:51
use mouseenter

Death-is-the-real-truth
– Death-is-the-real-truth

2018-03-23 10:51:55 +00:00
Commented Mar 23, 2018 at 10:51 — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 23, 2018 at 10:51
@KiranShahi, I edited my question for clarity.

Pierre-Clément Cazon
– Pierre-Clément Cazon

2018-03-23 10:54:58 +00:00
Commented Mar 23, 2018 at 10:54 — Pierre-Clément Cazon
– Pierre-Clément Cazon, Commented Mar 23, 2018 at 10:54
Please provide html too

Death-is-the-real-truth
– Death-is-the-real-truth

2018-03-23 10:55:02 +00:00
Commented Mar 23, 2018 at 10:55 — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Mar 23, 2018 at 10:55

eisbehr · Accepted Answer · 2018-03-23 11:12:27Z

1

I would use two different css classes. One default and one for the change of the hover effects. And then just toggle the second class on click of the button element.

It's mutch easier than try to do it your way and it could be easily changed and extended just in css. No need to touch the script in the future.

$("#editer-script").click(function() {
  var clicks = $(this).data('clicks');

  $('.contenu-editable').toggleClass('special', !clicks);
  $("#editer-script").text(clicks ? 'Rendre éditable' : 'Ne pas rendre éditable');

  $(this).data("clicks", !clicks);
});

.contenu-editable:hover {
  background-color: transparent;
}

.contenu-editable:hover .fa.fa-pencil {
  display: none;
}

.contenu-editable.special:hover {
  background-color: #f4f6f9;
}

.contenu-editable.special:hover .fa.fa-pencil {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="editer-script">Rendre éditable</button>
<div class="contenu-editable">
  <i class="fa fa-pencil">pencil</i>
  content
</div>

edited Mar 23, 2018 at 11:12

answered Mar 23, 2018 at 10:55

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pierre-Clément Cazon Over a year ago

Thanks but it seems that classes are not added when I click on the #edit-script div. The text changes correctly...

Pierre-Clément Cazon Over a year ago

How can I add the "sortable" feature in the same way as the "special" class ?

eisbehr Over a year ago

That is a bit mutch for this question and would be off-topic here. Please create a new question with the changes you did, and tell us whats the problem and what you want to do. We will help you then within the new question. ;) @Pierre-ClémentCazon

Collectives™ on Stack Overflow

Hover CSS with JQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related