0

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

Fricken Hamster
  • 539
  • 3
  • 7
  • 17
  • Not sure if I'm reading the question correctly, but this might be what you're looking for: http://stackoverflow.com/questions/4036857/jquery-remove-style-added-with-css-function – Wet Noodles Nov 17 '14 at 21:43
  • where is your jQuery and your HTML.....please post the code.... – Phani Nov 17 '14 at 21:43
  • setting the style to an empty string should 'revert' back to page default – Abbath Nov 17 '14 at 21:43
  • Why set the property manually? jQuery has `.hide()` and `.show()` just because they handle these kind of cases automatically. – JJJ Nov 17 '14 at 21:43
  • Hmm, setting the display value back to '' instead of 'block' seems to have fixed it. So doing .css is like adding a style='...' in the div tag and setting it back to blank is like removing it, so it defaults back to the css file? – Fricken Hamster Nov 17 '14 at 21:46
  • @FrickenHamster exactly, in fact, you can see this happen if you inspect the element with your html inspector in your browser. – Wet Noodles Nov 17 '14 at 21:47

2 Answers2

1

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')

Pablo Rincon
  • 999
  • 10
  • 23
0

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/

sepelin
  • 49
  • 6