Question

Web编程新手 - 我正在使用开源模板，尝试更改一些文本悬停着色。我只是想改变边框颜色，但我对如何更改此变量感到困惑，因为它有3个值并适用于3（？）个不同的类。下面的模板CSS代码：

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
     border-color: #e9ecef #e9ecef #ddd;
}

我可以用jquery改变“正常”变量：

$('.nav-link:hover').css("border-color", "rgba(0, 0, 0, .5)");

但我认为提供的CSS语法有些不同，我不理解。如何更改上面的代码行以成功更改.nav-link的边框颜色：hover？

Answer 1

Jquery引用DOM元素（成为元素树的HTML）。 CSS不是DOM的一部分，它是应用于DOM元素的样式。如果要更改样式，则需要添加到css：

.nav-link:hover {
     border-color: rgba(0, 0, 0, .5);
}

在现有样式下方执行此操作，它将覆盖其上方的样式。

Answer 2

试试这个

$('.nav-link:hover').css("border-color", "#e9ecef #e9ecef #ddd");

Answer 3

根据border-color MDN docs

border-color: red cyan gold; is equivalent to

border-top-color: red;
border-right-color: cyan;
border-bottom-color: gold;
border-left-color: cyan;

换句话说，配方是border-color: (top value) (left/right value) (bottom value)

并且提到过，你可以在CSS中简单地改变它，不需要jquery。您只需要确保它在其他规则之后加载，也可以在一个不同的文件中加载（即加载模板的CSS后需要的custom.css）。类似的东西：

.nav-link:hover {
     border-color: salmon salmon salmon;
}

Answer 4

但是你也可以通过CSS和jQuery来做到这一点。使用jQuery，您可以尝试以下方式：

$(document).on("mouseover", ".nav-link", function(){
  $(this).css("border-color", "rgba(0, 0, 0, .5)");
})
$(document).on("mouseout", ".nav-link", function(){
  $(this).attr("style", "");
})

还有CSS：

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
     border-color: rgba(0, 0, 0, .5);
 }

使用jquery更改具有多个值的单个变量

4 个答案: