When the mouse hovers over a CSS positioned absolute div, it will be displayed on

I am currently working with an HTML table and my goal is simple. I want to create a menu that opens when the mouse hovers over it, but within a table.

When I hover my mouse over the 

<span>Telephone:</span>
element, I want the 
<div class="secondary_menu">...</div>
to appear on the right side of the <td> element (using z-index) with a position of absolute.

Check out the code on JsFiddle

Here is the HTML code:

<table style="width:100%">
  <tr>
    <td>
      <span>Telephone:<br /><br /><br /><br /><br /></span>
      <div class="secondary_menu">
        <ul>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul>
      </div>
    </td>
    <td>555 77 854</td>
  </tr>
</table>

This implementation involves CSS and jQuery.

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

javascriptjqueryhtmlcss

Answer №1

To achieve this effect in CSS, you can utilize the :hover and adjacent sibling selectors:

table span:hover + .secondary_menu {
    display: block;
}

View updated fiddle

Answer №2

Kindly review the following code snippet for the demo you requested:

$(".maincontent").hover(function() {
    $('.secondary_menu').addClass(".active");
}, function() {
    $('.secondary_menu').removeClass(".active");
});
table,
tr td:last-child {
  position: relative;
}
td > div {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}
tr:hover td > div {
  opacity: 1;
}
tbody tr td:first-child:before {
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s;
}
tbody tr:hover td:first-child:before {
  background: rgba(0, 0, 0, 0.6);
}
td > div > a {
  
  background: #1DE9B6;
  color: #FFF;
  text-decoration: none;
  border-radius: 2px;
  padding: 3px;
  transition: color 0.5s, background 0.5s;
  margin-left : 10px;
}
/*Not important -- example only*/

td > div > a:hover {
  background: #A7FFEB;
  color: #000;
}
table {
  border-collapse: collapse;
  border: solid 1px #EEE;
}
th,
td {
  border: solid 1px #EEE;
  transition: background 0.5s;
}
tr:nth-child(even) {
  background: #E3F2FD;
}

table  tr  td {
  width : 50%;
}

.secondary_menu li{
  width : 300px;
  list-style-type : none;
}

.secondary_menu{
  display : none;
  width : 70px;
}

.maincontent:hover .secondary_menu {
  display : block !important;
  width : 70px;
}

.maincontent{
  padding : 5px;
  cursor: pointer;
}
.active{display : block !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered" id="sample_editable_1">
  <tbody>
    <tr>
      <td>
        <span class="maincontent">Telephone:
          <ul class="secondary_menu">
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul></span>
      </td>
      <td>
        <div><a href="#">989898989898</a><a href="#">989898989898</a></div>
      </td>
    </tr>
    <tr>
      <td>
        <span class="maincontent">Telephone:
          <ul class="secondary_menu">
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
          <li>My Dashboard</li>
        </ul></span>
      </td>
      <td>
        <div><a href="#">989898989898</a><a href="#">989898989898</a></div>
      </td>
    </tr>
  </tbody>
</table>
</div>

Answer №3

Utilize the sibling selector to modify the visibility of the sub_menu when hovering over a div

div:hover+.sub_menu {
  visibility: visible;
}

Check out this illustration http://example.com

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic Wordpress content with ajax loading

As someone who is new to php, ajax, and javascript, I've managed to piece together this website using tutorials and somewhat makeshift methods. However, I've encountered a major issue related to URLs that I can't seem to resolve. I' ...

phpjqueryajaxwordpressurl

Loading Data Using AJAX with JSON on Button Press - Dealing with Array Problems

I am trying to understand how to specifically select JSON objects when a line item meets certain variable criteria that is passed when a button is clicked. Currently, I have it working but the output displays as [object],[object]. I suspect this is happeni ...

javascriptjqueryjson

Recursive routing in NodeJS using Express

Certain website APIs have the capability to perform actions such as: Initial user's id their first friend, also a user v v GET /api/users/54282/friends/0/friends/0 ...

javascriptnode.jsrestexpress

Numerous conditionals placed in the <head> section of the document

I need to run a script in all browsers except versions of IE below 9. The conditional statement for IE looks like this: <!--[if gt IE 8]> JavaScript code goes here <![endif]--> However, this code will only execute in IE9 and not in any ot ...

javascripthtmlcssconditional-comments

The AngularJS array data is not displaying correctly

I am having trouble displaying comments array data in HTML properly. The data appears the same as it is in the comments array. What could be causing this issue? How should I proceed? <ul class="media-list" ng-controller="dishDetailController as menuCt ...

javascriptangularjs

Linking the location of the pop-up to the currently selected text box

I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it ...

javascriptjquerycssposition

Discover similarities between two arrays

My goal is to compare two arrays and generate a JSON array marking true if there's a match and false if there isn't. The second array will always have values that match some from the first, and it will be smaller as it's derived from the fir ...

javascriptarraystypescriptmatch

What are the best practices for handling dynamically generated fields?

I have a web layout with multiple dynamically created links using AJAX functions, and they are functioning correctly. However, I am unsure how to interact with these dynamically generated links. How can I call a JavaScript or jQuery function when I click ...

javascriptjquerydynamic-data

Encountered an issue when trying to adjust the state in my REACT application

While working on a small project to enhance my knowledge of React, I encountered the following error: " Line 19.5: 'state' is not defined no-undef ". I'm puzzled about what could be causing this... Interestingly, I have used a simi ...

javascriptreactjsjsx

"What is the best way to send user input from Javascript to a function in a Wordpress child theme's functions.php file using AJAX

My goal is to retrieve the data stored in the variable search_value within the msearch.js file and pass it to the PHP variable $woot in the functions.php file of the child theme. This value will then be returned by the function wtfwoot() and utilized for v ...

phpjqueryajaxwordpress

Issues encountered while attempting to add information to MySQL database using AJAX

I'm currently working on a project that involves creating a timeline with the capability for users to add comments to posts. However, I am facing an issue where the data does not seem to be getting inserted correctly. The comments display as expected, ...

phpjqueryajax

What is the best way to retrieve upload progress information with $_FILES?

HTML: <input type="file" value="choose file" name="file[]" multiple="multiple"/><br/> <input type="submit" class="submit" value="confirm" /> <input type="hid ...

phpjavascriptjqueryhtmlajax

"Unveiling the Benefits of Converting Body to JSON String and Object in Angular 7

Why is it necessary to convert event.body into a JSON string and then parse it back into an object? this.excelFileService.upload(this.currentFileUpload).subscribe(event => { if (event.type === HttpEventType.UploadProgress) { this.progress ...

javascriptangulartypescripthttpresponseangular7

Combining URLs in Angular 6 - A Step-by-Step Guide

How can I concatenate the commonUrl from CommonClass in Angular 6 for category.service.ts? common-class.ts export class CommonClass { constructor(public commonUrl : string = 'http://localhost:3000'){}; } category.service.ts import { CommonC ...

javascriptstringtypescript

Encountering special symbols in the ID of a form element triggers an error message in jQuery validator, stating 'Unrecognized expression'

One of the challenges I am facing is that I have a form with elements that have ids containing special symbols. For example: The id="$FormData[1]$PersonData[1]$PhysicalPerson[1]$PersonName[1]$Affix[@type='qualification' and @position='prefi ...

javascriptjqueryjquery-validate

Unable to change the value of selected items in checkbox event within a React context

Today marks the beginning of my journey into developing a React application. I am currently faced with the challenge of retrieving the row ID of a checked checkbox in a React table. Utilizing hooks, I have managed to transfer the states to another compone ...

javascriptreactjs

Creating a Modal in React without the need for a button to trigger it

I am working on implementing a model using the React Material UI library to display information on the landing page when a user logs in. However, I am facing an issue with closing the modal once it appears despite using a timeout trigger. const[post,setP ...

javascriptreactjsmaterial-ui

Personalized jQuery mask customization

After experimenting with a masking function that conceals numbers based on a specific pattern, I am now looking to make it more flexible for users. For instance, if a user types 123456789, the field will display as XXX-XX-6789. Currently, the pattern is ...

jquerycss

The interface 'IProduct' does not include several properties found in type 'IProduct[]', such as length, pop, push, concat, and many more

My goal is to transfer data between parent and child components using React and TypeScript. I have defined the following interfaces: export interface IProduct { id: string; name: string; price: string; image: string; ...

javascriptreactjstypescriptreact-hooksuse-reducer

What is the best way to swap out a string using jQuery?

I have multiple div elements that contain comma-separated values. If the word 'public' is found in any of these values, I want to show 'Yes'. Otherwise, I want to display 'No'. Currently, I am using if-else statements and inde ...

jquery