Question

我在另一个元素的click函数中将delete图标元素的显示设置为none，然后我使用JQuery将其设置为block。

但是在课程的css文件中，我有

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

pageButton是包含删除图标的父div。

运行点击功能后，它似乎禁用了在悬停父项时显示的css，并在没有时消失。无论如何都要将样式重置为css文件？

由于

Answer 1

另一种方法是使用jquery只需在删除图标中添加/删除一个类。

.hideIcon{display:none;}

所以，使用jquery，当点击时，你切换类：.toggleClass（＆＃39; hideIcon＆＃39;）

Answer 2

我建议您使用javascript添加/删除类而不是show（）/ hide（）。在此示例中，要添加和删除的类是 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');
});

此css将显示或隐藏按钮，具体取决于课程 show_button

的存在

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

您可以看到一个示例：http://jsfiddle.net/pvsyx3ez/

使用Jquery css后将样式恢复为css文件

2 个答案: