Question

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

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

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

但是如果我想在hover伪中添加一些属性呢？

我试过

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

但这似乎不起作用。

由于

Answer 1

您应该将hover() 方法应用为功能，例如：

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="nav-link"></div>

＆＃13;

Answer 2

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

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

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

-static

如果要删除样式，只需执行

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

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

（我在这个例子中使用的是ES6模板文字，因此看起来更干净。在生产中使用它之前，您可能需要先检查https://caniuse.com/#search=interpolation。）

使用jQuery来改变悬停伪

2 个答案: