Question

所以我正在编写一个网站，其主页有一个跨度，允许你点击它，然后向下滚动到一个新的部分，滚动工作，并向下滚动，但如果我手动向上滚动文本显示蓝色并加下划线。有没有办法阻止这种情况发生。

    <a class="Scroll" href="#section02"><span></span>Scroll</a>

这是我使用过的HTML，新版块的ID为section02。

$(function() {
$('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: 
$($(this).attr('href')).offset().top}, 500, 'linear');
    });
});

这是JS使用的。

.Scroll {
position: absolute;
height: 20px;
z-index: 20;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

.Scroll::after{
position: absolute;
height: 20px;
z-index: 20;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

.Scroll:hover {
    opacity: .5;
    color: #fff;
    text-decoration: none;
}

这是我用过的CSS，因为我认为可能是因为我点击链接后没有样式但问题仍然存在，尽管当滚动为蓝色时悬停样式仍然有效。

What the scroll link looks like before.

And what it looks like after being pressed and manually scrolling up.

感谢任何帮助

Answer 1

试试这个：

.Scroll a, a:hover, a:visited, a:link, a:active {
    color: #FFFFFF;
    text-decoration: none;
}

text-decoration: none;应该做的伎俩并删除下划线。如果仍然无效，请!important之后添加text-decoration：text-decoration: none !important;

Answer 2

试试这个，更改颜色和删除文本修饰的代码必须直接在a标签中

a{
    text-decoration: none;
    color: inherit;
}

Answer 3

将你的CSS设置为

a：访问{text-decoration：none;白颜色; }

您可以将颜色更改为您想要的任何颜色。 text-decoration none将删除下划线。

我编写的页面在单击链接时向下滚动。单击后显示为蓝色

3 个答案: