Word Highlight on Hover

Written by @kerixa 10 April 2021

There are texts in all websites and each of them is important for a specific section. Some are used to introduce the website and some texts are used to express the contents of the website. Using a special style to display these texts better and more beautifully will attract more audiences to the site. With this code the background color of each word in the text changes by hovering and the word becomes highlighted.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.javascriptfreecode.com coded by: Kerixa Inc. -->
<style>
body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
    font-family: 'Comfortaa', cursive;
    color: #ffffff;
    font-size: 12px;
}

section {
    padding: 2rem;
    box-sizing: border-box;
}

span {
    cursor: pointer;
}
a{
	color:white;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Comfortaa:700" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<section>
<h1>COOL HOVER EFFECT</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
    takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
<script>
$(document).ready(function () {
    var text = $("p").text();
    var newtext = " <span> ";
    var newchar = " </span><span> ";
    newtext += text.split(' ').join(newchar);
    $("p").html(newtext);
    $("span").hover(function () {
        $(this).css({
            "background-color": "#ff5252",
            "color": "#000"
        });
    }, function () {
        $(this).css({
            "background-color": "unset",
            "color": "#fff"
        });
    });
});
</script><a target='_blank' href='https://www.javascriptfreecode.com' style='font-size: 8pt; text-decoration: none'>JavaScript Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: admin_js, bloxio, yqaice, flooketsu, phuang_test
advertisement 2