Write a JavaScript program to highlight the bold words of the paragraph, on mouse over a certain link

Write a JavaScript program to highlight the bold words of the paragraph, on mouse over a certain link

3 years ago

For this, we have to write two functions for onMouseOver and onMouseOut. When the mouse hovers over the object or text all the bold letters of the paragraph should be highlighted. For this, we have to write some CSS code to highlight the bold letters inside highlight() function. After over out the bold letters should be displayed as previous, for that also we need to write some CSS code inside returnNormal() function.

<!DOCTYPE html>
<html>
  <head>
    <title> Hilight Bold Words </title>
  </head>
  <body>
    
    <h2 onMouseOver="highlight()" onMouseOut="returnNormal()" style="color: blue; cursor: pointer">  On Mouse Over Here </h2>
    
    <p style="font-size: 20px;">
      Lorem ipsum dolor sit amet, <strong> consectetur </strong> adipisicing elit, sed do eiusmod <strong> tempor </strong> incididunt ut labore et dolore <strong> magna </strong> aliqua. Ut enim ad minim <strong> veniam </strong>, quis nostrud exercitation ullamco <strong> laboris </strong> nisi ut aliquip ex ea <strong> commodo </strong> consequat. Duis aute irure dolor in reprehenderit in <strong> voluptate </strong> velit esse cillum dolore eu fugiat <strong> nulla </strong> pariatur. Excepteur sint <strong> occaecat </strong> cupidatat non proident, sunt in culpa qui officia <strong> deserunt </strong> mollit anim id est laborum.
    </p>

    <script type="text/javascript">
      function highlight() {
        var hi = document.getElementsByTagName("strong");
        for (var i = 0; i < hi.length; i++) {
        hi[i].style.backgroundColor = "yellow";
        }
      }
      function returnNormal() {
        var hi = document.getElementsByTagName("strong");
        for (var i = 0; i < hi.length; i++) {
        hi[i].style.backgroundColor = "white";
        }
      }
    </script>
  </body>
</html>