How to underline some words when scrolling?

Question

I am busy with a site here and I want to underline some words in different colors when scrolling over a section as attached.

1 - How can I reach such effect?

2 - And if I want to show a icon (font awesome) when scrolling, would that be similar?

thanks

I think you're searching for something like [this](http://codepen.io/Kseso/pen/bfzjC). A quick google can solve questions like these.. — Clemens Himmer, Jan 15 '16 at 09:11
Thanks, I know how to underline a word, but I want that this particular class gets fired when I am hoovering another, bigger class...I think some jquery /js is needed for this? — user3394645, Jan 15 '16 at 09:31
No, [you don't have to](http://stackoverflow.com/a/5061953/3880255). And **please** learn how to properly utilize google, your question's solution can be found on google in less than two minutes. — Clemens Himmer, Jan 15 '16 at 09:34
Thanks Tarekis, I am a beginner and need coaching with my own code. I put [my code in this example](https://jsfiddle.net/te9qrjLn/2/)...Can you teach me how to fire all the childs when I am hoovering on parent in stead of hoovering over childs one by one? — user3394645, Jan 15 '16 at 10:18

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

You can combine this and this to get a proper result.

Change your selector for the :before elements to this:

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

Now this CSS applies when the parent is hovered.

JSFiddle

edited May 23 '17 at 12:31

Community

1
1

answered Jan 15 '16 at 10:45

Clemens Himmer

1,340
2
13
26

score -1 · Answer 2 · answered Jan 15 '16 at 10:43

Here have the html and js code to do it.

.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>

NO need for JS, also no dependencies so it fires when the user scrolls over the element, and a change in css is really bad, at least change classes.. — Clemens Himmer, Jan 15 '16 at 10:47

How to underline some words when scrolling?

2 Answers2