Javascript 当te标头具有“sticky”类时，如何更改原始颜色？

我正在为自己制作一个网站，我有一个非常酷的悬停效果，它会选择一个数组中定义的随机颜色，并将其放入其中。当光标离开时，它会变回正常状态

问题就从这里开始

颜色更改元素都位于标题中。如果用户向下滚动，标题将更改其颜色。如果用户向下滚动，则标题会使类变为粘性并变为黑色

以下是网站：

下面是jquery：

var randomLinks = $('.navlink');
var original = randomLinks.css("color");
var colors = ['#ee6161', '#00f2a6', '#01c0fa'];

$(".navlink").hover(
    function () { //mouseover
        var col2 = Math.floor(Math.random() * colors.length);
        var newcolor = colors[col2];
        $(this).css('color', newcolor);
    }, 
    function () { //mouseout
        $(this).css('color', original);
    }
);

默认颜色设置为navlink类，为黑色。正如我们所知，黑对黑不是很好

是否有任何方法可以使标题具有类粘性时，navlink的原始颜色变为白色

问候

---

Martin您是否在CSS中尝试了以下内容：

header.sticky .navlink {
    color: #ffffff;
}

还要确保删除style=color:rgb0,0,0；在HTML中，因为这部分代码覆盖了上面的CSS：

---

您是否在CSS中尝试了以下内容：

header.sticky .navlink {
    color: #ffffff;
}

还要确保删除style=color:rgb0,0,0；在HTML中，因为这部分代码覆盖了上面的CSS：

---

在您的网站上，我看到带有navlink的元素已经成为如下目标：

header.sticky ul li a { color: white; }

上面的选择器的优先级高于.navlink，因此当前正在应用该选择器。不管怎样，我想你在找这个：

header.sticky .navlink { color: #ffffff !important; }

或者，您可以添加！颜色值的重要参数，以增加优先级或使选择器更具体

让我知道它是怎么做的

更新：最新消息！这里需要重要的选择器

首字母：

编辑后：

---

在您的网站上，我看到带有navlink的元素已经成为如下目标：

header.sticky ul li a { color: white; }

上面的选择器的优先级高于.navlink，因此当前正在应用该选择器。不管怎样，我想你在找这个：

header.sticky .navlink { color: #ffffff !important; }

或者，您可以添加！颜色值的重要参数，以增加优先级或使选择器更具体

让我知道它是怎么做的

更新：最新消息！这里需要重要的选择器

首字母：

编辑后：

---

我认为与悬停相关的代码将内联样式的黑色添加到标记中，这就是问题所在

<a href="index.html" class="navlink" style="color: rgb(0, 0, 0);">Home</a>

而不是

$(this).css('color', original);

---

在您的事件处理程序中，鼠标移出部分应该起到作用

我认为与悬停相关的代码是在标记中添加内联样式的黑色，这就是这里的问题所在

<a href="index.html" class="navlink" style="color: rgb(0, 0, 0);">Home</a>

而不是

$(this).css('color', original);

---

在您的事件处理程序中，鼠标移出部分应该完成这项任务

我的建议是，不要用js更改.navlink的样式属性，它会更改内联css并具有比css文件规则更高的顺序，而是更改数据颜色属性，并在css文件中为其指定适当的颜色，然后当导航链接有粘性时，可以很容易地更改css中导航链接的默认颜色

JS:

变量颜色=['红色'、'绿色'、'蓝色']； $'.navlink'。在“鼠标悬停”上，函数E{ var col2=Math.floorMath.random*colors.length； var newcolor=颜色[col2]； $this.data'color'，newcolor； } CSS:

.navlink[数据颜色=红色]{ 颜色：红色； } .navlink[数据颜色=绿色]{ 颜色：绿色； } .navlink[数据颜色=蓝色]{ 颜色：蓝色； } .sticky.navlink{ 颜色：白色； }

---

我的建议是，不要用js更改.navlink的style属性，因为js会更改内联css，并且比css文件规则的顺序更高，而是更改css文件中的数据颜色属性和，为其指定适当的颜色，这样，当css中的navlink出现粘性时，就很容易更改其默认颜色

JS:

变量颜色=['红色'、'绿色'、'蓝色']； $'.navlink'。在“鼠标悬停”上，函数E{ var col2=Math.floorMath.random*colors.length； var newcolor=颜色[col2]； $this.data'color'，newcolor； } CSS:

.navlink[数据颜色=红色]{ 颜色：红色； } .navlink[数据颜色=绿色]{ 颜色：绿色； } .navlink[数据颜色=蓝色]{ 颜色：蓝色； } .sticky.navlink{ 颜色：白色； }

---

您所要做的就是将$el.css'color'更改为$el.style'color'。因此jQuery将以CSS选择器为目标，而不是内联样式

var randomLinks = $('.navlink');
var original = randomLinks.style("color");
var colors = ['#ee6161', '#00f2a6', '#01c0fa'];

$(".navlink").hover(
    function () { //mouseover
        var col2 = Math.floor(Math.random() * colors.length);
        var newcolor = colors[col2];
        $(this).style('color', newcolor);
    }, 
    function () { //mouseout
        $(this).style('color', original);
    }
);

var rdmlinks = $('.rdmcolorlink');
var orig = rdmlinks.style('color');
var clr = ['#ee6161', '#00f2a6', '#01c0fa'];

rdmlinks.hover(function () { //mouseover
    var clr2 = Math.floor(Math.random() * clr.length);
    var newclr = clr[clr2];
    $(this).style('color', newclr);
}, function () { //mouseout
    $(this).style('color', orig);
});

---

您所要做的就是将$el.css'color'更改为$el.style'color'。因此jQuery将以CSS选择器为目标，而不是内联样式

var randomLinks = $('.navlink');
var original = randomLinks.style("color");
var colors = ['#ee6161', '#00f2a6', '#01c0fa'];

$(".navlink").hover(
    function () { //mouseover
        var col2 = Math.floor(Math.random() * colors.length);
        var newcolor = colors[col2];
        $(this).style('color', newcolor);
    }, 
    function () { //mouseout
        $(this).style('color', original);
    }
);

var rdmlinks = $('.rdmcolorlink');
var orig = rdmlinks.style('color');
var clr = ['#ee6161', '#00f2a6', '#01c0fa'];

rdmlinks.hover(function () { //mouseover
    var clr2 = Math.floor(Math.random() * clr.length);
    var newclr = clr[clr2];
    $(this).style('color', newclr);
}, function () { //mouseout
    $(this).style('color', orig);
});

---

我用你的更正更新了网站，可惜它不起作用。我是否必须删除标题。是否必须删除标题a{color:white；}？我还更新了我的问题，因此您也可以看到我正在使用的jquery。嗨，Martin，我检查了它，问题是header.sticky.navlink没有足够的优先级，另一个选择器被认为更重要。这是因为每个元素的每个样式标记都添加了一种颜色，这使得header.sticky.navlink无法工作。如果你加上！重要的是，在颜色之后，它确实有效。header.sticky.navlink{color:ffffff！important；}。我知道

---

你应该限制使用！尽可能重要，但在这种情况下，没有其他选择。我试图增加选择器的优先级，但这还不够。我用你的更正更新了网站，但遗憾的是它不起作用。我是否必须删除标题。是否必须删除标题a{color:white；}？我还更新了我的问题，因此您也可以看到我正在使用的jquery。嗨，Martin，我检查了它，问题是header.sticky.navlink没有足够的优先级，另一个选择器被认为更重要。这是因为每个元素的每个样式标记都添加了一种颜色，这使得header.sticky.navlink无法工作。如果你加上！重要的是，在颜色之后，它确实有效。header.sticky.navlink{color:ffffff！important；}。我知道你应该限制使用！尽可能重要，但在这种情况下，没有其他选择。我试图增加选择器的优先级，但这还不够。我用你的更正更新了网站，但遗憾的是它不起作用。我是否必须删除标题。是否必须删除标题a{color:white；}？我还更新了我的问题，因此您也可以看到我正在使用的jquery。@MartinSchmidt我想您必须从HTML中的链接中删除此部分，然后它应该可以工作：style=color:rgb0，0，0；这部分是硬编码的，覆盖了你的CSS。我用你的更正更新了网站，可惜它不起作用。我是否必须删除标题。是否必须删除标题a{color:white；}？我还更新了我的问题，因此您也可以看到我正在使用的jquery。@MartinSchmidt我想您必须从HTML中的链接中删除此部分，然后它应该可以工作：style=color:rgb0，0，0；这部分是硬编码的，覆盖了你的CSS。我找到了“简单的方法”。这只是简单的修复。请看下面我的答案。我已经找到了“简单的方法”。这只是简单的修复。请看下面我的答案。