CODEWITHSUNDEEP
jquerycss
Fricken Hamster
Fricken Hamster

Reputation: 569

Reverting style to css file after using Jquery css

I have in another element's click function to set a delete icon element's display to none, and then later I set it back to block, using JQuery.

However in the css file for the class, I have

.pageDeleteIcon
{
   display:none;
}
.pageButton:hover .pageDeleteIcon
{
    display: block;
}

pageButton is the parent div that contains the delete Icon.

After the click function is run though, it seems to disable the css that makes it appear when hovering the parent, and disappear when it isn't. Is there anyway to reset the style to the css file?

Thanks

Upvotes: 0

Views: 129

Answers (2)

sepelin
sepelin

Reputation: 49

I suggest you to use add/remove classes instead of show() / hide() with javascript. In this example, the class to add and remove is show_button

//The onclick event for external element
$('#hide_delete').click(function (){
  $('.pageButton').toggleClass('show_button');
  return false;
});

//This will add the class when the mouse is in, and will remove it when the mouse is out.
$('.pageButton').hover(function (){
    $(this).addClass('show_button');
  },
  function (){
    $(this).removeClass('show_button');
});

This css will show or hide the button depending on the presence of the class show_button

.pageDeleteIcon {
  display:none;
}
.pageButton.show_button .pageDeleteIcon {
  display: block;
}

You can see an example working on: http://jsfiddle.net/pvsyx3ez/

Upvotes: 0

Pablo Rincon
Pablo Rincon

Reputation: 1039

Another approach is that with jquery you simply add/remove a class to the delete icon.

.hideIcon{display:none;}

So, with jquery, when on click, you toggle the class: .toggleClass('hideIcon')

Upvotes: 1

Related Questions