当标题具有“粘性”类时，如何更改原始颜色？

Posted 2023-05-09

【中文标题】当标题具有“粘性”类时，如何更改原始颜色？

【英文标题】：How can I change the original color when te header has class "sticky"?

【发布时间】：2020-12-27 13:54:07

【问题描述】：

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

这就是问题的开始。

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

这里是网站：m-sch.cf

这里是 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”类，即黑色。而且我们知道，黑底黑不是很好。

我有什么办法可以使标题具有“粘性”类时，“导航链接”的原始颜色变为白色？

问候

马丁

【问题讨论】：

我找到了“简单的方法”。这只是简单的修复。请在下面查看我的答案。

【参考方案1】：

我认为您的悬停相关代码正在向标签添加内联样式颜色黑色，这就是这里的问题

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

style="color: rgb(0, 0, 0); 在悬停后被添加到标签上方，如果您加载页面并在下方滚动而不悬停菜单，则它们是白色的，悬停后每个菜单都被硬编码为黑色，如解释的那样

OP 发表评论后更新：

使用下面的代码

$('a.navlink').css('color', '');

而不是

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

在您的事件处理程序（鼠标移出部分）中应该可以解决问题

【参考方案2】：

我的建议是，不要使用 js 更改 .navlink 的样式属性（更改内联 css 并且具有比 css 文件规则更高的顺序），更改 data-color 属性并在 css 文件中为其分配适当的颜色，然后很容易在css中更改navlink的默认颜色。

JS：

    var colors = ['red', 'green', 'blue'];
    $('.navlink').on('mouseover', function(e) 
        var col2 = Math.floor(Math.random() * colors.length);
        var newcolor = colors[col2];
        $(this).data('color', newcolor);
    

CSS：

    .navlink[data-color=red]
        color: red;
     
    .navlink[data-color=green]
        color: green;
     
    .navlink[data-color=blue]
        color: blue;
     
    
    .sticky .navlink
        color:white;
    

【参考方案3】：

您只需将$(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);
);

【参考方案4】：

在您的网站上，我看到带有 navlink 的元素已经被定位为：

header.sticky ul li a  color: white; 

上述选择器的优先级高于.navlink，因此目前正在应用该选择器。无论如何，我认为您正在寻找这个：

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

您可以选择将!important 参数添加到颜色值以提高优先级或使选择器更具体。

告诉我它是怎么做的！

更新：这里需要!important 选择器。

首字母：

修改后：

【讨论】：

我用您的更正更新了网站，遗憾的是它不起作用。我是否必须删除“header.sticky ul li a color: white; ”？我还更新了我的问题，因此您也可以看到我正在使用的 jquery。

嗨马丁，我检查了它，问题是header.sticky .navlink 没有足够的优先级（另一个选择器被认为更重要）。那是因为每个元素的每个style 标签都添加了一种颜色，这使得header.sticky .navlink 不起作用。如果在颜色后添加!important，它确实有效。 header.sticky .navlink color: #ffffff !important; 。 （我知道你应该尽可能限制 !important 的使用，但是在这种情况下没有其他选择。我试图增加选择器的优先级，但这还不够。）

【参考方案5】：

您是否在 CSS 中尝试过以下操作：

header.sticky .navlink 
    color: #ffffff;

还要确保在您的 HTML 中删除 style="color:rgb(0,0,0);"，因为这部分代码会覆盖上面的 CSS：

<a href="index.html" class="navlink">Martin Schmidt</a>

【讨论】：

我用您的更正更新了网站，遗憾的是它不起作用。我是否必须删除“header.sticky ul li a color: white; ”？我还更新了我的问题，因此您也可以看到我正在使用的 jquery。