When you hover your cursor over specific keywords, they will light up and glow in the sentence or paragraph

Question

When you hover your cursor over specific keywords, they will light up and glow in the sentence or paragraph

Looking to create a sentence or paragraph like "I enjoy taking my dog for a walk." with categories such as "Nouns", "Verbs", etc. I envision the ability for users to hover over "Nouns" and have words like "dog" and "walk" light up, while hovering over "Verbs" would highlight "enjoy" and "taking". I believe using span tags around specific words with classes like "noun" or "verb" in conjunction with CSS and/or JavaScript could achieve this effect. Can anyone offer guidance on how to implement this?

To clarify, here is an example of what I have in mind.

Nouns - Verbs

I enjoy taking my dog for a walk.

javascript html css

Answer 1

Answer №1

Check out this code snippet for a helpful example:

function highlightWords(category) {
    let words = document.getElementById("words").children;
    for (let i = 0; i < words.length; i++) {
        if (words[i].className === category) {
            words[i].classList.add("highlighted");
        } else {
            words[i].classList.remove("highlighted");
        }
    }
}

let selects = document.getElementsByClassName("select");

for (let i = 0; i < selects.length; i++) {
    selects[i].addEventListener("mouseenter", function() {
        highlightWords(this.dataset.words);
    });
    selects[i].addEventListener("mouseleave", function() {
        highlightWords("empty");
    });
}

.highlighted {text-shadow: 1px 1px 1px red}

<div id="words"><span>I</span> <span class="verb">like</span> <span class="verb">to ride</span> <span>my</span> <span class="noun">bicycle</span> <span>every</span> <span class="noun">day</span></div> 
<div class="select" data-words="noun">Nouns</div>
<div class="select" data-words="verb">Verbs</div>

Answer 2

Check out this code snippet for a helpful example:

function highlightWords(category) {
    let words = document.getElementById("words").children;
    for (let i = 0; i < words.length; i++) {
        if (words[i].className === category) {
            words[i].classList.add("highlighted");
        } else {
            words[i].classList.remove("highlighted");
        }
    }
}

let selects = document.getElementsByClassName("select");

for (let i = 0; i < selects.length; i++) {
    selects[i].addEventListener("mouseenter", function() {
        highlightWords(this.dataset.words);
    });
    selects[i].addEventListener("mouseleave", function() {
        highlightWords("empty");
    });
}

.highlighted {text-shadow: 1px 1px 1px red}

<div id="words"><span>I</span> <span class="verb">like</span> <span class="verb">to ride</span> <span>my</span> <span class="noun">bicycle</span> <span>every</span> <span class="noun">day</span></div> 
<div class="select" data-words="noun">Nouns</div>
<div class="select" data-words="verb">Verbs</div>

Answer 3

Answer №2

I found it interesting how others were struggling with this task, but I managed to solve it easily. It did make me question if I had misunderstood your requirements, but I am confident that I interpreted them correctly.

To achieve the desired functionality, I utilized mouseenter and mouseleave events along with a combination of ids and div elements.

For the implementation, I leveraged jQuery, so ensure that you have included the jQuery library in your project.

$(document).ready(function(){
/* Start of Verbs */
    $("#verb").mouseenter(function(){
        $(".verb").css("text-shadow", "1px 1px 1px blue");
    });
    $("#verb").mouseleave(function(){
        $(".verb").css("text-shadow", "");
    });
  /* End of Verbs */
  
  /* Start of Nouns */
    $("#noun").mouseenter(function(){
        $(".noun").css("text-shadow", "1px 1px 1px red");
    });
    $("#noun").mouseleave(function(){
        $(".noun").css("text-shadow", "");
    });
    /* End of Nouns */
});

#verb {

}

.verb {
text-shadow: none;
display: inline;
}
#noun {
  
}

.noun {
text-shadow: none;
display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id ="noun">Nouns</span> - <span id="verb">Verbs</span></p>

<div class="noun">I</div> like to <div class="verb">ride</div> <div class="noun">my</div> bicycle every day.

Answer 4

I found it interesting how others were struggling with this task, but I managed to solve it easily. It did make me question if I had misunderstood your requirements, but I am confident that I interpreted them correctly.

To achieve the desired functionality, I utilized mouseenter and mouseleave events along with a combination of ids and div elements.

For the implementation, I leveraged jQuery, so ensure that you have included the jQuery library in your project.

$(document).ready(function(){
/* Start of Verbs */
    $("#verb").mouseenter(function(){
        $(".verb").css("text-shadow", "1px 1px 1px blue");
    });
    $("#verb").mouseleave(function(){
        $(".verb").css("text-shadow", "");
    });
  /* End of Verbs */
  
  /* Start of Nouns */
    $("#noun").mouseenter(function(){
        $(".noun").css("text-shadow", "1px 1px 1px red");
    });
    $("#noun").mouseleave(function(){
        $(".noun").css("text-shadow", "");
    });
    /* End of Nouns */
});

#verb {

}

.verb {
text-shadow: none;
display: inline;
}
#noun {
  
}

.noun {
text-shadow: none;
display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span id ="noun">Nouns</span> - <span id="verb">Verbs</span></p>

<div class="noun">I</div> like to <div class="verb">ride</div> <div class="noun">my</div> bicycle every day.

Answer 5

Answer №3

<div class="description"
  <span class="adjective">adjective</span> not an adjective
  <span class="adjective">another adjective</span>
</div>

var adjectives = document.querySelectorAll('.adjective');
var bindColor = function (element) {
  element.addEventListener('mouseenter', function () {
    for (var i = 0; i < adjectives.length; i++) {
      adjectives[i].style.backgroundColor = 'blue';    
    }
  })
  element.addEventListener('mouseleave', function () {
    for (var i = 0; i < adjectives.length; i++) {
      adjectives[i].style.backgroundColor = '';    
    }
  })
}
for (var i = 0; i < adjectives.length; i++) {
  bindColor(adjectives[i]);
}

Perhaps this code snippet could be useful to you?

Answer 6

<div class="description"
  <span class="adjective">adjective</span> not an adjective
  <span class="adjective">another adjective</span>
</div>

var adjectives = document.querySelectorAll('.adjective');
var bindColor = function (element) {
  element.addEventListener('mouseenter', function () {
    for (var i = 0; i < adjectives.length; i++) {
      adjectives[i].style.backgroundColor = 'blue';    
    }
  })
  element.addEventListener('mouseleave', function () {
    for (var i = 0; i < adjectives.length; i++) {
      adjectives[i].style.backgroundColor = '';    
    }
  })
}
for (var i = 0; i < adjectives.length; i++) {
  bindColor(adjectives[i]);
}

Perhaps this code snippet could be useful to you?

Answer 7

Answer №4

If you want to style each word individually, you can wrap them in a tag like <span> and utilize CSS :before or :after pseudo elements to display the content generated.

onload = function () {

  var confirmation = document.querySelector(".confirm_selection");

  var grammar = {
    "I": "noun",
    "like": "adverb",
    "to": "preposition",
    "ride": "verb",
    "my": "noun",
    "bicycle": "noun",
    "every": "adjective",
    "day": "noun"
  };
  
  Object.entries(grammar).forEach(function([word, key]) {
    var span = document.createElement("span");
    span.textContent = word;
    span.className = key;
    confirmation.appendChild(span);
  })

}

.confirm_selection {
  -webkit-transition: text-shadow 0.2s linear;
  -moz-transition: text-shadow 0.2s linear;
  -ms-transition: text-shadow 0.2s linear;
  -o-transition: text-shadow 0.2s linear;
  transition: text-shadow 0.2s linear;
  top: 50px;
  display: block;
  height: 100px;
  position: relative;
}

.confirm_selection:hover {
  text-shadow: 0 0 10px red;
}

.confirm_selection [class]:hover:before {
  content: attr(class);
  position: absolute;
  display: inline-block;
  top: -24px;
  background: #000;
  color: gold;
  z-Index: 2;
  max-width: 78px;
  overflow: hidden;
  margin-bottom: 12px;
}

.confirm_selection span {
  display:inline-block;
  position: relative;
  margin: 2px;
}

<!-- overflow-x: hidden; overflow-y: hidden; -->
<div class="confirm_selection" style="opacity: 1; ">[ Confirm Selection ]</div>

Answer 8

If you want to style each word individually, you can wrap them in a tag like <span> and utilize CSS :before or :after pseudo elements to display the content generated.

onload = function () {

  var confirmation = document.querySelector(".confirm_selection");

  var grammar = {
    "I": "noun",
    "like": "adverb",
    "to": "preposition",
    "ride": "verb",
    "my": "noun",
    "bicycle": "noun",
    "every": "adjective",
    "day": "noun"
  };
  
  Object.entries(grammar).forEach(function([word, key]) {
    var span = document.createElement("span");
    span.textContent = word;
    span.className = key;
    confirmation.appendChild(span);
  })

}

.confirm_selection {
  -webkit-transition: text-shadow 0.2s linear;
  -moz-transition: text-shadow 0.2s linear;
  -ms-transition: text-shadow 0.2s linear;
  -o-transition: text-shadow 0.2s linear;
  transition: text-shadow 0.2s linear;
  top: 50px;
  display: block;
  height: 100px;
  position: relative;
}

.confirm_selection:hover {
  text-shadow: 0 0 10px red;
}

.confirm_selection [class]:hover:before {
  content: attr(class);
  position: absolute;
  display: inline-block;
  top: -24px;
  background: #000;
  color: gold;
  z-Index: 2;
  max-width: 78px;
  overflow: hidden;
  margin-bottom: 12px;
}

.confirm_selection span {
  display:inline-block;
  position: relative;
  margin: 2px;
}

<!-- overflow-x: hidden; overflow-y: hidden; -->
<div class="confirm_selection" style="opacity: 1; ">[ Confirm Selection ]</div>

When you hover your cursor over specific keywords, they will light up and glow in the sentence or paragraph

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Obtain the $httpProvider from jQuery in order to intercept and manipulate messages

How to decide the layout according to the number of flex children?

Discovering the solution to populating and building a tree structure using jsTree in conjunction with SQL Server, addressing the challenges associated with the

eliminate shared elements across various arrays

One benefit of using a self-invoking function within a function declaration

Troubleshooting the issue of CSS animations activating twice and causing a flickering effect specifically in the Firefox browser

Can you recommend any open source projects with exceptionally well-written Jasmine or Jasmine-Jquery tests?

Using the Selenium webdriver to reach the bottom of the page by scrolling vertically

How to turn off spin buttons for input type=“number” in AngularJS when using webkit

Guide to dynamically binding two input fields in a table using Jquery

JavaScript nested function scope loss issue is being faced

Modify the button's color when clicked and add it to an array with JavaScript

Bring the element to the top of the page by clicking on the anchor within the element or anywhere within the specified div ID

The Angular2 Observable fails to be activated by the async pipe

Generate several invoices with just a single click using TypeScript

How can I retrieve an image from a specific directory using HTML?

Clicking a link using Selenium WebDriver and JavaScript

Updating the "title" attribute dynamically using jQuery in real time

How to trigger a typescript function from an external JavaScript function

Convert the menu items into a multi-select using Bootstrap 4