Reverting style to css file after using Jquery css

Question

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

Not sure if I'm reading the question correctly, but this might be what you're looking for: stackoverflow.com/questions/4036857/… — Wet Noodles
– Wet Noodles, Commented Nov 17, 2014 at 21:43
where is your jQuery and your HTML.....please post the code.... — Phani
– Phani, Commented Nov 17, 2014 at 21:43
setting the style to an empty string should 'revert' back to page default — Abbath
– Abbath, Commented Nov 17, 2014 at 21:43
Why set the property manually? jQuery has .hide() and .show() just because they handle these kind of cases automatically. — JJJ
– JJJ, Commented Nov 17, 2014 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
– Fricken Hamster, Commented Nov 17, 2014 at 21:46

Pablo Rincon · Accepted Answer · 2014-11-17 21:44:44Z

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

answered Nov 17, 2014 at 21:44

Pablo Rincon

1,03912 silver badges24 bronze badges

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

Comments

sepelin · Accepted Answer · 2014-11-17 22:05:57Z

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/

Collectives™ on Stack Overflow

Reverting style to css file after using Jquery css

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related