Question

显然，人们实际上无法注释掉这些代码，但是，从JavaScript开始，我如何制作下面的CSS看起来好像被注释掉了？我如何取消注释？

.box:hover div.innercontent {

    -webkit-transform: perspective(3000) translateZ(200px);

    -moz-transform: scale(1.1);
    -moz-perspective: 3000px;

    transform: perspective(3000) translateZ(200px) ;
    z-index: 90;

    box-shadow:0 0 35px 5px black;
}

.box:hover div.innerlabel {

    -webkit-transform: perspective(500) rotateX(5deg) translateZ(60px);

    -moz-transform: rotateX(5deg) scale(1.1);
    -moz-perspective: 500px;

    transform: perspective(500) rotateX(5deg) translateZ(60px);

    box-shadow:0 0 20px 8px white; 
    z-index: 100;
}

.box:hover div.labelwrapper {

    z-index: 100;
}

由于

Answer 1

从元素中删除css类。

您可以使用jQuery或其他stackoverflow question来完成此操作。

Answer 2

如果CSS构成CSS文件的完整性，您可以在disabled元素上设置<link/>属性以禁用其中定义的所有样式。这可能是最简单的方法，尤其是在处理:hover样式时。

Answer 3

我会告诉你如何做一个，你可以使用相同的技术：

$(".innercontent")
   .addClass('.innercontent-dummy')
   .removeClass('.innercontent');

然后恢复

$(".innercontent-dummy")
  .addClass('.innercontent')
  .removeClass('.innercontent-dummy');

'dummy'类不必具有任何格式;如果要恢复原始类，只需要它作为占位符来查找元素。

Answer 4

我使用修饰符类，如“active”，来切换元素的开关状态。 Bootstrap也可以使用菜单和其他元素。

例如：

CSS：

.box.active:hover div.innercontent {
    -webkit-transform: perspective(3000) translateZ(200px);
    -moz-transform: scale(1.1);
    -moz-perspective: 3000px;
    transform: perspective(3000) translateZ(200px) ;
    z-index: 90;
    box-shadow:0 0 35px 5px black;
}
.box.active:hover div.innerlabel {
    -webkit-transform: perspective(500) rotateX(5deg) translateZ(60px);
    -moz-transform: rotateX(5deg) scale(1.1);
    -moz-perspective: 500px;
    transform: perspective(500) rotateX(5deg) translateZ(60px);
    box-shadow:0 0 20px 8px white; 
    z-index: 100;
}
.box.active:hover div.labelwrapper {
    z-index: 100;
}

JavaScript的：

$('.box').toggleClass('active');

如何从JavaScript“注释掉”CSS代码？

4 个答案: