将CSS类A复制到B类

时间:2014-08-28 15:12:30

标签: javascript jquery html css

这是一些代码

<button id="test" class="ui-state-hover" value="Button">

上下文

我在HTML按钮上使用JQuery UI CSS类ui-state-hover(我希望该按钮看起来像它的悬停)。但当我mouseout另一个JQuery UI元素时,该类继续消失,我想这是正常的行为,

<button id="test" class="" value="Button">

所以我认为在那个特定的JQuery元素中必须有一行类似于此的代码:

$('.ui-state-hover').on('mouseout', function(){$(this).removeClass('ui-state-hover');})

在每个具有该类的元素上删除该类。所以我很难,我只需要拥有与ui-state-hover相同的CSS但我的名字不同的类。所以我可以给那个元素复制和POUF!问题解决!

MyCssClass = ui-state-hover
<butotn id="test" class="MyCssClass" value="Button">

因此需要一种方法将一个CSS类的内容复制到另一个。我宁愿有一个纯CSS答案,但如果不存在JQuery或Javascript就行。

我虽然使用这样的东西,但它看起来很傻我觉得它不起作用。

$('.MyCssClass').css($('.ui-state-hover').css());

谢谢!

修改

以下是关于尝试做什么的更多信息。

我在目录中放入了不同JQuery Theme的sh * t音,根据用户的选择,我切换.css文件并重新加载页面。由于每个主题或几乎每个主题都具有相同的类,因此它们是可互换的。所以ui-state-hover可能在ui-darkness JQuery UI Theme中有黑色背景颜色,但在ui-lightness中JQuery UI Theme背景可能是灰色的。

这就是为什么我需要动态地将页面加载中的一些复制到我自己的类中,我不能只复制/粘贴.css文件的内容。

修改

这是一个说明我问题的小提琴:

http://jsfiddle.net/yr89tg9g/

看看当你悬停test2时它是如何松开ui-state-hover类的?为了阻止这一点,我很难克隆课程,但似乎无法做到......

2 个答案:

答案 0 :(得分:0)

可能解决了问题:

css只是一个标签和HTML。它可以有一个ID:

<style type="text/css" id="sourcecss">
/* your definition here */
</style>

因此:

jQuery("head").append('<style type="text/css" id="targetcss"></style)');
jQuery("#targetcss").html( jQuery("#sourcecss").html() );

在我们的某个应用中就像一个魅力。

答案 1 :(得分:0)

也许这个?

$("#myButton").on("mouseout blur", function(){
    $(this).addClass("ui-state-hover");
});