A creative way to display a div upon hovering over a link dynamically

Question

A creative way to display a div upon hovering over a link dynamically

My website has dynamically generated a tags, each with its own corresponding div containing unique content and height. I want to make it so that when a user hovers over an a tag, the matching div is displayed. The div should appear at the position of the mouse cursor and grow upwards from bottom to top, since the links are located at the bottom of the page.

Below is an example of what the code looks like (where $z is a counter):

<a href="<?php echo $link_djv;?>" class="rsshover" id="djvl_<?php echo $z;?>" target="_blank">
    <li>
        <p class="headline"><?php echo $title_djv;?></p>
    </li>
</a>

<div class="preview" id="djvd_<?php echo $z;?>">
    <?php echo $description_djv;?>
</div>

I have searched through various threads but haven't found a suitable solution to this problem yet. Any help would be greatly appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

Execute Code

This code provides a basic foundation for your project. While the animation may need refinement, it serves as an effective starting point.

class TooltipManager {
  constructor () {
    this.xCoordinate;
    this.yCoordinate;
    this.links = document.querySelectorAll('a');
    this.addEventListeners();
    this.activeLink = false;
  }
  
  addEventListeners () {
    for (let link of this.links) {
      link.addEventListener('mouseenter', (e) => this.handleMouseEnter(e));
      link.addEventListener('mouseleave', (e) => this.handleMouseLeave(e));
    }
    document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
  }
  
  handleMouseMove (event) {
    this.xCoordinate = event.pageX; 
    this.yCoordinate = event.pageY;
    
    if (this.activeLink) {
      this.activeLink.style.top = `${this.yCoordinate}px`;
      this.activeLink.style.left = `${this.xCoordinate}px`;
    }
  }
  
  handleMouseEnter (event) {
    this.activeLink = event.target.nextElementSibling;
    this.activeLink.style.maxHeight = '50px';
  }
  
  handleMouseLeave (event) {
    let targetContent = event.target.nextElementSibling;
    targetContent.style.maxHeight = 0;
    this.activeLink = false;
  }
  
}

new TooltipManager();

.preview {
  position: absolute;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
}

li {
  list-style: none;
}

a {
  padding: 20px;
  margin: 20px;
  color: white;
  display: block;
  background-color: grey;
  width: 100px;
}

<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 1
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 2
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 3
</div>

Answer 2

Execute Code

This code provides a basic foundation for your project. While the animation may need refinement, it serves as an effective starting point.

class TooltipManager {
  constructor () {
    this.xCoordinate;
    this.yCoordinate;
    this.links = document.querySelectorAll('a');
    this.addEventListeners();
    this.activeLink = false;
  }
  
  addEventListeners () {
    for (let link of this.links) {
      link.addEventListener('mouseenter', (e) => this.handleMouseEnter(e));
      link.addEventListener('mouseleave', (e) => this.handleMouseLeave(e));
    }
    document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
  }
  
  handleMouseMove (event) {
    this.xCoordinate = event.pageX; 
    this.yCoordinate = event.pageY;
    
    if (this.activeLink) {
      this.activeLink.style.top = `${this.yCoordinate}px`;
      this.activeLink.style.left = `${this.xCoordinate}px`;
    }
  }
  
  handleMouseEnter (event) {
    this.activeLink = event.target.nextElementSibling;
    this.activeLink.style.maxHeight = '50px';
  }
  
  handleMouseLeave (event) {
    let targetContent = event.target.nextElementSibling;
    targetContent.style.maxHeight = 0;
    this.activeLink = false;
  }
  
}

new TooltipManager();

.preview {
  position: absolute;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
}

li {
  list-style: none;
}

a {
  padding: 20px;
  margin: 20px;
  color: white;
  display: block;
  background-color: grey;
  width: 100px;
}

<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 1
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 2
</div>
<a href="/" class="rsshover" id="djvl_123" target="_blank">
    <li>
        <p class="headline">some title</p>
    </li>
</a>

<div class="preview" id="djvd_098">
    content 3
</div>

Answer 3

Answer №2

To make your link display a div in the correct location when hovered over, you will need to implement a mouseover event and a corresponding javascript function. You should also include a mouseout event to hide the div once the mouse leaves the link.

One way to approach this is by updating your PHP code as follows:

<a href="<?php echo $link_djv;?>" class="rsshover" onmouseover="showDiv('<?php echo $z;?>');" onmouseout="hideDiv('<?php echo $z;?>');" id="djvl_<?php echo $z;?>" target="_blank">
    <li>
        <p class="headline"><?php echo $title_djv;?></p>
    </li>
</a>

<div class="preview" id="djvd_<?php echo $z;?>" style="display:none;">
    <?php echo $description_djv;?>
</div>

In addition, create a javascript function like this:

    <script>
    function showDiv(counter) {
          document.getElementById('djvd_' + counter).style.display = 'block';
       // Adjust the position of the displayed div here

    }


    function hideDiv(counter) {
         document.getElementById('djvd_' + counter).style.display = 'none';
     }
    </script>

Answer 4

To make your link display a div in the correct location when hovered over, you will need to implement a mouseover event and a corresponding javascript function. You should also include a mouseout event to hide the div once the mouse leaves the link.

One way to approach this is by updating your PHP code as follows:

<a href="<?php echo $link_djv;?>" class="rsshover" onmouseover="showDiv('<?php echo $z;?>');" onmouseout="hideDiv('<?php echo $z;?>');" id="djvl_<?php echo $z;?>" target="_blank">
    <li>
        <p class="headline"><?php echo $title_djv;?></p>
    </li>
</a>

<div class="preview" id="djvd_<?php echo $z;?>" style="display:none;">
    <?php echo $description_djv;?>
</div>

In addition, create a javascript function like this:

    <script>
    function showDiv(counter) {
          document.getElementById('djvd_' + counter).style.display = 'block';
       // Adjust the position of the displayed div here

    }


    function hideDiv(counter) {
         document.getElementById('djvd_' + counter).style.display = 'none';
     }
    </script>

Answer 5

Answer №3

To incorporate CSS into your design, simply nest the div.preview within the a.rsshover.

.rsshover .preview {
            display: none;
        }
        
        .rsshover:hover .preview {
            display: block;
        }

<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">1</p>
    </li>
    <div class="preview">
        ONE
    </div>
</a>
<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">2</p>
    </li>
    <div class="preview">
        TWO
    </div>
</a>
<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">3</p>
    </li>
    <div class="preview">
        THREE
    </div>
</a>

Answer 6

To incorporate CSS into your design, simply nest the div.preview within the a.rsshover.

.rsshover .preview {
            display: none;
        }
        
        .rsshover:hover .preview {
            display: block;
        }

<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">1</p>
    </li>
    <div class="preview">
        ONE
    </div>
</a>
<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">2</p>
    </li>
    <div class="preview">
        TWO
    </div>
</a>
<a href="#" class="rsshover" target="_blank">
    <li>
        <p class="headline">3</p>
    </li>
    <div class="preview">
        THREE
    </div>
</a>

Answer 7

Answer №4

I am not quite sure how you would like the preview to appear, but here is a solution that might be helpful.

(function($) {
  var $currentElement;
  $('.rsshover').on('mouseenter', function(e) {
    $currentElement = $('#djvd_' + $(this).attr('id').substr(5));
    $currentElement.css({
      position: 'absolute',
      display: 'block',
      top: e.clientY + 'px',
      left: e.clientX + 'px'
    });
  }).on('mouseleave', function() {
    $currentElement.hide()
  })
})(jQuery)

.preview {
    display: none;
}

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

<a href="#" class="rsshover" id="djvl_1" target="_blank">
    <p class="headline">Headline</p>
</a>

<div class="preview" id="djvd_1">
    Description 1
</div>

Additionally, it is advised not to include <li> tags within an anchor tag <a>.

Answer 8

I am not quite sure how you would like the preview to appear, but here is a solution that might be helpful.

(function($) {
  var $currentElement;
  $('.rsshover').on('mouseenter', function(e) {
    $currentElement = $('#djvd_' + $(this).attr('id').substr(5));
    $currentElement.css({
      position: 'absolute',
      display: 'block',
      top: e.clientY + 'px',
      left: e.clientX + 'px'
    });
  }).on('mouseleave', function() {
    $currentElement.hide()
  })
})(jQuery)

.preview {
    display: none;
}

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

<a href="#" class="rsshover" id="djvl_1" target="_blank">
    <p class="headline">Headline</p>
</a>

<div class="preview" id="djvd_1">
    Description 1
</div>

Additionally, it is advised not to include <li> tags within an anchor tag <a>.

A creative way to display a div upon hovering over a link dynamically

Answer №1

Execute Code

Answer №2

Answer №3

Answer №4

Similar questions

How can I refresh the node server during runtime?

An elusive melody that plays only when I execute the play command

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

Tips for converting API data to DTO (Data Transfer Object) using TypeScript

Include a search button within the search box of the Custom Search Engine

Are you in favor of side-to-side scrolling?

Rendering user actions instantly in React.js without waiting for server propagation

Avoid the sudden change in page content when using Router.Navigate

What is the best way to replicate a synchronous ajax call? (mimicking synchronous behavior with asynchronous methods)

I'm attempting to resize my images to fit within the container, but instead they appear enlarged

What is the process for eliminating transparency from the overlay feature while utilizing Dojox/Standby?

Is there a way to perfectly center this image with the rest of my text content?

Is it possible to use Ajax to upload images on a website?

Having difficulty accessing the Material UI Icons

What are the recommended practices for utilizing AJAX effectively?

Alter the background image of a DIV based on the selected menu item

Deliver the GWT module in JavaScript format

Having difficulty transforming a JSON string into a JSON object using Javascript

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

Using Angular.js to update the `ng-model` with the value of text.textContent