Home >Web Front-end >Front-end Q&A >How to implement the small box prompt content that appears when the mouse is moved in javascript

How to implement the small box prompt content that appears when the mouse is moved in javascript

WBOYOriginal: 2023-05-09 11:53:361143browse

JavaScript is a very powerful programming language that can be used to implement a variety of functions, including the function of moving the mouse into a small box to prompt content. In this article, we will detail how to implement this functionality using JavaScript.

1. HTML structure

First, we need to create an HTML page and add some elements to the page that require prompt content. For example, we can create a list containing some links.

<ul>
  <li><a href="#" class="tooltip">Link 1</a></li>
  <li><a href="#" class="tooltip">Link 2</a></li>
  <li><a href="#" class="tooltip">Link 3</a></li>
  <li><a href="#" class="tooltip">Link 4</a></li>
  <li><a href="#" class="tooltip">Link 5</a></li>
</ul>

In this example, we use the "tooltip" class name to identify the element where tip content needs to be added.

2. CSS Style

Next, we need to add CSS styles to these elements to display prompt content when the mouse moves in. We can use the CSS pseudo-class ":after" to create a prompt box, and use the CSS attribute "content" to add prompt text. For example:

.tooltip {
  position: relative;
}

.tooltip:hover:after {
  content: "This is a tooltip";
  position: absolute;
  top: 100%;
  left: 0;
  padding: 5px;
  background-color: #000;
  color: #fff;
  border-radius: 5px;
  z-index: 999;
}

In this example, we use the "position: relative" attribute to set the relative positioning of the element, and the "position: absolute" attribute to set the absolute positioning of the prompt box. We also used the "top: 100%" and "left: 0" attributes to place the tooltip below the element. We also use some other CSS properties to style the tooltip, such as "padding", "background-color", "color", and "border-radius".

3. JavaScript code

Now that we have created the HTML structure and CSS style, we need to use JavaScript to implement the function of moving the mouse into the small box prompt content.

We can use JavaScript's addEventListener() function to listen to mouse move-in and move-out events, and use JavaScript's style attribute to set the style of the element. For example:

var tooltips = document.querySelectorAll('.tooltip');

for (var i = 0; i < tooltips.length; i++) {
  tooltips[i].addEventListener('mouseover', function() {
    this.style.position = 'relative';
  });
  
  tooltips[i].addEventListener('mouseout', function() {
    this.style.position = '';
  });
}

In this example, we use the document.querySelectorAll() function to select all elements with the "tooltip" class name, and use the for loop and addEventListener() function to monitor mouse movement in and out respectively. event. When the mouse moves in, we use the this keyword to set the "position" attribute of the current element to "relative", and when the mouse moves out, we set the "position" attribute to empty. During this process, the browser will show or hide the prompt box according to the CSS style.

4. Complete code example

Finally, let’s take a look at the complete code example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript Tooltip</title>
  <style>
    .tooltip {
      position: relative;
    }

    .tooltip:hover:after {
      content: "This is a tooltip";
      position: absolute;
      top: 100%;
      left: 0;
      padding: 5px;
      background-color: #000;
      color: #fff;
      border-radius: 5px;
      z-index: 999;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#" class="tooltip">Link 1</a></li>
    <li><a href="#" class="tooltip">Link 2</a></li>
    <li><a href="#" class="tooltip">Link 3</a></li>
    <li><a href="#" class="tooltip">Link 4</a></li>
    <li><a href="#" class="tooltip">Link 5</a></li>
  </ul>

  <script>
    var tooltips = document.querySelectorAll('.tooltip');

    for (var i = 0; i < tooltips.length; i++) {
      tooltips[i].addEventListener('mouseover', function() {
        this.style.position = 'relative';
      });

      tooltips[i].addEventListener('mouseout', function() {
        this.style.position = '';
      });
    }
  </script>
</body>
</html>

In this example, we use HTML, CSS and JavaScript Technology is used to realize the function of prompting content in a small box when the mouse is moved. Please modify and adjust as necessary to meet your specific needs.

The above is the detailed content of How to implement the small box prompt content that appears when the mouse is moved in javascript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html for 循环事件 this position padding border 伪类 background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Where to set javascript on your computerNext article：Where to set javascript on your computer

See more

How to implement the small box prompt content that appears when the mouse is moved in javascript

Related articles