What steps can I take to create an element that changes upon hovering over it?

Question

What steps can I take to create an element that changes upon hovering over it?

I am attempting to implement a mechanism similar to this:

https://i.sstatic.net/wZctM.png

Here is my current approach:

$(document).ready(function(){
    $('a').bind('mouseenter', function() {
      var self = $(this);
      this.iid = setInterval(function() {
       var tag_name = self.text(),
             top      = self.position().top + self.outerHeight(true),
             left     = self.position().left;
         self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
         $(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);   
      }, 525);
}).bind('mouseleave', function(){
    this.iid && clearInterval(this.iid);
});
});

body{
  padding: 20px;
}

a {
    color: #3e6d8e !important;
    background-color: #E1ECF4;
    padding: 2px 5px;
}
.tag_info{
  position: reletive;
  width: 130px;
  height: 30px;
  display:none;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>tag1</a>
<a>tag2</a>

It currently repeats every time. How can I make it execute once per hover? And why isn't the position applying?

Is my algorithm correct for this task?

Thank you.

javascript jquery html css

Answer 1

Answer №1

It seems unnecessary to use setInterval in this code snippet. I have made some adjustments to simplify the functionality. Now, whenever the mouse enters an element, a <div class='tag_info'> is appended, and it is removed when the mouse leaves.

$(document).ready(function(){
    $('#test').on('mouseenter', function() {
      var self = $(this);
       var tag_name = self.text(),
             top      = self.position().top + self.outerHeight(true),
             left     = self.position().left;
         self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
         $(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);   
}).on('mouseleave', function(){
    $(this).children('.tag_info').remove();
});
});

body{
  padding: 20px;
}

a {
    color: #3e6d8e !important;
    background-color: #E1ECF4;
    padding: 2px 5px;
}
.tag_info{
  position: reletive;
  width: 130px;
  height: 30px;
  display:none;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="test">tag1</a>

Answer 2

It seems unnecessary to use setInterval in this code snippet. I have made some adjustments to simplify the functionality. Now, whenever the mouse enters an element, a <div class='tag_info'> is appended, and it is removed when the mouse leaves.

$(document).ready(function(){
    $('#test').on('mouseenter', function() {
      var self = $(this);
       var tag_name = self.text(),
             top      = self.position().top + self.outerHeight(true),
             left     = self.position().left;
         self.append("<div class='tag_info'>Some explanations about"+tag_name+"</div>")
         $(".tag_info").css({top: top + "px", left: left + "px"}).fadeIn(200);   
}).on('mouseleave', function(){
    $(this).children('.tag_info').remove();
});
});

body{
  padding: 20px;
}

a {
    color: #3e6d8e !important;
    background-color: #E1ECF4;
    padding: 2px 5px;
}
.tag_info{
  position: reletive;
  width: 130px;
  height: 30px;
  display:none;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="test">tag1</a>

Answer 3

Answer №2

As mentioned by Dij:

Your current action:
- setInterval - (repeats the function every 525ms)
Your desired outcome:
- setTimeout - (runs the function once with a delay of 525ms)

Further information:

setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp

setTimeout https://www.w3schools.com/jsref/met_win_settimeout.asp

Answer 4

As mentioned by Dij:

Your current action:
- setInterval - (repeats the function every 525ms)
Your desired outcome:
- setTimeout - (runs the function once with a delay of 525ms)

Further information:

setInterval https://www.w3schools.com/jsref/met_win_setinterval.asp

setTimeout https://www.w3schools.com/jsref/met_win_settimeout.asp

What steps can I take to create an element that changes upon hovering over it?

Answer №1

Answer №2

Similar questions

Sending the axios fetched property from the parent component to the child component results in the error message "TypeError: Cannot read property 'x' of undefined"

How can we use PHP and jQuery to open a simple modal with data?

Is it possible to eliminate the default placeholder text from Safari browser?

React is struggling to locate the specified module

React re-rendering only when arrays are filtered, and not when new elements are added

Interested in gaining knowledge on how to define basic properties on the model within Angular.JS?

What is the process for transferring a JavaScript variable to a Java servlet?

Finding a specific element within a table using xpath in selenium proved to be a challenge

Using Typescript generics to enhance arrays

Styling for the DataTable disappears upon loading jQuery

How can I loop through SVG elements and attach an event listener to each one in JavaScript?

Refreshing Datatable without having to refresh the entire webpage

Animating elements outside of the current route when the route changes in Angular

Tips for coordinating the use of the '.append()' method and an ajax request within a loop

An issue occurred while serializing or deserializing, specifically with the JavaScriptSerializer and

The UI bootstrap dropdown toggle requires two clicks to reopen after being manually closed

Blazing a trail: Making a cursor blink in Blazor

Using jQuery to insert HTML content into a div element by replacing a specific string

The art of organizing dates and times

Is there an efficient method for matching "data-" attributes with property names in mixed case?