使用 jQuery/javascript 修改元素的 :hover 样式答案

【问题标题】：Modifying :hover styling for an element with jQuery/javascript使用 jQuery/javascript 修改元素的 :hover 样式
【发布时间】：2013-08-21 19:43:34
【问题描述】：

我正在使用 jquery/javascript 构建一个所见即所得的页面样式编辑器。我正在尝试提供一种修改链接的 :hover 状态的方法，以便我的用户可以更改链接的颜色、大小、重量等。我知道如何将样式应用于元素的默认状态，但找不到任何有关如何将样式应用于元素的文档：悬停状态。

有什么帮助吗？

要应用我正在执行的任何操作，请执行以下操作：

$('#content a').css('color','#ffcc00');

我需要为 a:hover 做类似的事情。即：

$('#content a:hover').css('color','#000');

【问题讨论】：

How do you add pseudo classes to elements using jQuery? 的可能重复项
你现在如何应用任何风格？
@putvande 见我上面的编辑。只是简单的jquery css
这不是答案吗？（第二行代码）
也许这将与事件（on）hover 一起工作。 jsfiddle.net/pDuWN

标签： javascript jquery css dom hover

【解决方案1】：

如果您想使用 javascript 进行更改，可以将其附加到 jQuery.hover()。这是一个完整的工作example

$('a.link').hover(
       function(){

            $(this).css('color',$('input').val());
       }
     );

我构建了一个 WYSIWYG 编辑器，并将用户定义的设置存储在一个数据库中，因此在我将更改保存到表单后我不会重新加载页面，而是使用 javascript 更新行为。

【讨论】：

如果你还没有看过 TinyMCE，你应该看看。这是一款出色的 WYSIWYG 编辑器，您可以在项目中使用。
试一试你的答案，看看它是否有效。我知道 TinyMCE，但这是一个更复杂的项目。问题是实际项目的简化版本（WYSIWYG 模板生成器）。将样式存储在数据库中是计划:)
嗯，非常接近。悬停不会关闭。我真的不想走课程路线，因为我将动态创建 CSS。
这是最接近的答案。我做了一些更改：将 'a.link' 更改为 'a' 并添加了第二个 function(){} 用于当用户鼠标移出时。

【解决方案2】：

您可以使用 CSS，例如断言您的元素的 id 是

“元素1”

css：

#element1:hover {
    background-color:pink;
}

【讨论】：

@johnSmith 抱歉，这是一种纯 CSS 方法。我已经澄清了这个问题。