滚动时如何在某些单词下划线？答案

【问题标题】：How to underline some words when scrolling?滚动时如何在某些单词下划线？
【发布时间】：2016-04-20 19:57:30
【问题描述】：

我正忙于一个网站here，我想在滚动浏览所附的部分时用不同颜色强调一些字词。

1 - 我怎样才能达到这样的效果？

2 - 如果我想在滚动时显示一个图标（字体真棒），那会类似吗？

谢谢

【问题讨论】：

我认为您正在搜索类似this 的内容。一个快速的谷歌可以解决这些问题..
谢谢，我知道如何在单词下划线，但我希望这个特定的类在我悬停另一个更大的类时被解雇...我认为需要一些 jquery /js？
不，you don't have to。请学习如何正确使用google，不到两分钟就可以在google上找到你的问题的解决方案。
感谢 Tarekis，我是初学者，需要使用自己的代码进行指导。我把my code in this example...你能教我如何在我悬停在父母身上而不是一个一个地悬停在孩子身上时如何解雇所有孩子吗？

标签： jquery html css scroll underline

【解决方案1】：

您可以组合this 和this 以获得正确的结果。

将:before 元素的选择器更改为：

.parent:hover .hvr-underline-from-left:before

现在，当父级悬停时，此 CSS 应用。

JSFiddle

【讨论】：

【解决方案2】：

这里有html和js代码来做。

.container{
    width: 100%;
    height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>GETTING STARTED WITH BRACKETS</title>
        <link rel="stylesheet" href="main.css">
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $(document).ready(function(){
              
            });
            $(window).scroll(function(){
                 $("#words").css('text-decoration','underline');
            });
       
       
        </script>
    </head>
    <body>
        <div class="container">
            <p id="words">
                sdfgdsjafaghdf
            </p>
        </div>
        
    </body>
</html>

【讨论】：

不需要 JS，也没有依赖项，所以当用户滚动元素时它会触发，并且 css 的更改非常糟糕，至少更改类..