使用jQuery改变悬停伪答案

【问题标题】：Using jQuery to change hover pseudo使用jQuery改变悬停伪
【发布时间】：2018-04-24 21:52:33
【问题描述】：

所以，我不会做很多前端工作，我相信这非常简单。到目前为止，我还没有看到答案。

我有一个触发一些 CSS 更改的 jQuery 函数。

$(".nav-link").css({ set of changes });

但是如果我想给悬停伪添加一些属性呢？

我试过了

$(".nav-link:hover").css({ ... });

但这似乎不起作用。

谢谢

【问题讨论】：

对this question的任何答案有帮助吗？
@GoldDragonTSU 我确实看到了，但希望 jquery 中内置了一些更简单的东西。我有类似的东西，但只是将属性添加到类中似乎有点笨重。不过，感谢您的提示。
这些属性中有一些是预设的（即已知的）吗？ ..在那里你可以制定一些 CSS 规则；只需切换类与 css 样式？
在发布问题stackoverflow.com/questions/9827095/…之前请阅读此内容
但是请看，我并没有尝试添加样式，甚至没有尝试从 jquery 控制悬停状态。我正在尝试向样式表中已经存在的悬停伪类添加（或更改）属性。

标签： jquery css

【解决方案1】：

您应该将hover() 方法应用为函数，例如：

$('.nav-link').hover(function(){
  $(this).css({'background':'lightblue', 'border':'none'});
}, function(){
  $(this).css({'background':'initial', 'border':'1px solid'});
});

.nav-link {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-link"></div>

【讨论】：

【解决方案2】：

.hover 函数有效，但有时直接编写 CSS 会容易得多。

这是我用来使其在边缘情况下工作的一种方式。（可能不是一个好习惯。）

您可以使用这种方式添加任何 CSS。

$('body').append('<div class="new-styles"></div>');

$('.new-styles').html(`
<style>
    a:hover {
        /* ... */
    }
    a:after {
        /* ... */
    }
</style>
`);

当你想删除样式时，只需这样做

$('.new-styles').remove();

（我在此示例中使用 ES6 模板文字，这样它看起来更干净。您可能需要先检查https://caniuse.com/#search=interpolation，然后再将其用于生产环境。）

【讨论】：

但是请看，我并没有尝试添加样式，甚至没有尝试从 jquery 控制悬停状态。我正在尝试向样式表中已经存在的悬停伪类添加（或更改）属性。
@aserwin 问题是，样式表无法使用 Javascript 进行编辑。您找到的任何 Javascript 解决方案都只是添加新的 CSS 以覆盖当前的 CSS。例如, $(...).css({...}) 用于为选定元素添加内联 CSS 样式
我明白了。而且，我在我的脚本中这样做了。我可以覆盖任何属性（基于任何条件），除了 :hover 伪类中的那些......我觉得应该有办法。
很遗憾，$(...).css({...}) 仅适用于内联样式，并且不可能将内联样式用于伪选择器。这个 SO 答案也会对您有所帮助 stackoverflow.com/a/21709814/5599288