JS、CSS解决标签颜色在黑色和白色背景颜色重叠问题/标签栏随背景切换变化而变化

最新推荐文章于 2024-07-01 10:00:53 发布

一位即将成功的野男人

最新推荐文章于 2024-07-01 10:00:53 发布

阅读量1.4k

点赞数

分类专栏：前端网页设计小技巧文章标签： javascript css html5 js html

本文链接：https://blog.csdn.net/gg1229505432/article/details/118616313

版权

前端网页设计小技巧专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了一种利用JavaScript和HTML的onmouseover事件来改变标签颜色，以避免在白色背景上与背景颜色重叠的方法。通过为相关元素添加和移除CSS类，实现在鼠标悬停时标签文字颜色的动态切换，从而达到视觉上的清晰显示。同时，建议在CSS中添加过渡效果以提升用户体验。

摘要由CSDN通过智能技术生成

先上演示效果

解：

如图，当标签在红框区域颜色可以正常显示，但到红框下面的一些区域则和白色背景颜色相重叠。则不显示。

我们可以改变标签栏的样式，让其在白色背景时变成黑色。

如图下所示

点击右侧演示网页即可演示网页

其中用到了JS和html中的οnmοuseοver=“function()”事件。

在颜色变化的标签div中打一个id="nav_content"，

在颜色和标签颜色重叠的div（如图中的蓝色区域）中写一个οnmοuseοver=“function()”事件，

当鼠标移动到蓝色区域时，执行οnmοuseοver=“function()”事件，

function()函数可以给id="nav_content"的div中加class=" "样式，

样式让文字变黑，就可以解决标签颜色在黑色和白色背景颜色重叠问题。

代码：

<script>
        var logos = function() {
            document.getElementById('logo1').classList.remove('hiddenlogo');
            document.getElementById('logo').classList.add('hiddenlogo');
            document.getElementById('nav_content').classList.remove('nav_content');
            document.getElementById('nav_content').classList.add('nav_content1');
            document.getElementById('nav_content_ul').classList.remove('nav_content_ul');
            var aaa = function() {
                var c = document.getElementsByName('font_color');
                for (var i = 0; i <= c.length; i++) {
                    c[i].classList.remove('font_white');
                    c[i].classList.add('font_black');
                }
            }
            aaa();
        }
        var logos1 = function() {
            document.getElementById('logo').classList.remove('hiddenlogo');
            document.getElementById('logo1').classList.add('hiddenlogo');
            document.getElementById('nav_content').classList.add('nav_content');
            document.getElementById('nav_content').classList.remove('nav_content1');
            document.getElementById('nav_content_ul').classList.add('nav_content_ul');
            var aaa = function() {
                var c = document.getElementsByName('font_color');
                for (var i = 0; i <= c.length; i++) {
                    c[i].classList.remove('font_black');
                    c[i].classList.add('font_white');
                }
            }
            aaa();
        }
    </script>

别忘了设置另一个onmouseover事件，这样就可以复原标签了。要不加另一个事件，改了标签颜色就回不去了。

TIPS：在css里面加一个transition过度样式，可以让导航标签过度的更无缝衔接一点。我这里设置的是0.4s