Show the nested div when hovering over the containing div using JavaScript

I have a situation where I have multiple divs within a parent div, all using the same class. Here is an example:

<div class="deck-content">
    <div class="deck-box">TEST<
       <div class="deck-hidden"><
          <span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"></span><
          <span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span><
          <span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span><
       </div><
    </div><
    <div class="deck-box">TEST<
       <div class="deck-hidden"><
          <span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"></span><
          <span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span><
          <span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span><
       </div><
    </div><
    <div class="deck-box">TEST<
       <div class="deck-hidden"><
          <span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"></span><
          <span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span><
          <span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span><
       </div><
    </div><
 </div><

My goal is to make the child div with the class deck-hidden visible when I hover over its parent div with the class deck-box.

The issue I am facing is that I do not know in advance how many deck-box divs there will be, so assigning unique IDs to each one is not feasible.

Is there a way to achieve the desired effect of showing the respective deck-hidden div when hovering over a deck-box without individual IDs?

javascriptjqueryhtmlcss

Answer №1

Here is a simple way to show hidden content when hovering over a box:

.box:hover .hidden-content {
  display: block;
}

Answer №2

$('div.card-container').hover(function(){
    $(this).children('div.card-details').show();
}, function(){
    $(this).children('div.card-details').hide();
})

Check out the jquery demo

Answer №3

The correct approach is to follow 'Syahrul's answer, but there is a slight error in the way the class name is represented. Without the '.', it will not function as intended. The corrected version should be:

.deck-hidden {
   display: none;    
}
.deck-box:hover .deck-hidden {
   display: block;
}

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

The error cannot be generated by $.ajax when the data is equal to 0

I'm reaching out for advice as I am a beginner with jQuery. Below is the code snippet: function fetchFromDatabase(data) { var dbData = data; console.debug("DB data retrieved :", dbData) $.ajax({ type: "POST ...

jquery

Incorporate a Font Awesome icon into a Bootstrap 4 callout

I am having issues adding an icon to the left side of a Bootstrap 4 callout. Currently, the icon is appearing above the H4 heading. I would like the icon to be positioned on the left side before the message. I have attempted using .p:last-child but it doe ...

cssbootstrap-4

What is the correct way to iterate through an object, evaluate three properties, and then push them into an array?

I am tasked with creating a function called runOnRange that will populate a new array based on the properties of an object. The object contains three properties: start, end, and step. The goal is to push specific numbers into the array according to these p ...

javascriptarraysloopsobject

Acquiring the API through the callback function within a React application

I wrote a function that connects to an API and fetches data: import {API_KEY, API_URL} from "./constants"; export const getOperations = async (id, successCallback) => { try { const response = await fetch(`${API_URL}/tasks/${ ...

javascriptreactjsapi

Altering the DOM directly within the componentDidMount() lifecycle method without needing to use

In ReactJS, I am facing an issue while trying to manipulate the DOM in the componentDidMount() method. The problem lies in the fact that the DOM is not fully rendered at this point, requiring me to use a setTimeout function, which I find undesirable. Upon ...

javascriptcssreactjs

Transforming a traditional HTML/CSS/JS website into a cutting-edge React application using Tailwind CSS styling

I have a unique website template complete with HTML, CSS, and all necessary assets. Now, I am looking to develop a React JS application using this template. Firstly, I am wondering: Since I typically use Tailwind CSS for my other projects, would it be mo ...

htmlcssreactjstailwind-css

Running globally installed node modules on Windows 7 is not supported

Note: Despite scouring various posts on this issue, I have not found a solution that works for me. That's why I am reaching out here. Problem: I am facing an issue while trying to set up the http-server package on my Windows 7 system using the comman ...

javascriptnode.jsnpmnpm-installserverside-javascript

Leveraging Angular 2 directives in TypeScript to bind a value from a custom control to an HTML control

I have created a unique custom directive named "my-text-box", and within this directive, I am utilizing the HTML control <input>. I want to pass values from my custom control to the HTML input control. In Angular 1, I would simply do something like & ...

htmltypescriptangularangular2-directives

What is the reason behind Express serving the static file through the router, while also causing the path to the scripts folder to

Directory Layout app ├── app.js ├── public │   ├── data │   │   └── data.json │   ├── index.html │   └── js │   ├── filter-list.js └── routes └── index.js Setting up ap ...

javascriptnode.jsexpressroutes

Is it possible to create a CSS-only negative border radius?

I'm reaching out for help with a specific issue. I want to create a unique negative border radius for my navigation links, similar to the design shown in this image: http://prntscr.com/9vi0b5 Instead of using images like in the example, I'm look ...

csscss-shapes

What could be causing the invalid expression error to pop up in my Vue.js template?

I encountered an error within my vue single file component: Errors compiling template: invalid expression: Unexpected token { in {{ jobs[0].build_link }} Raw expression: v-bind:href="{{ jobs[0].build_link }}" The complete code causing the is ...

javascriptvue.js

Using Node.js, iterate over every key-value pair within a Redis hash data structure

I am currently navigating my way through the world of redis and node, attempting to iterate over some test hash keys that I have generated. My goal is to display the results on the screen. The expected output should look like this: { "aaData": [['Tim ...

javascriptnode.jsexpressredishogan.js

Tips for attaching a callback to Angular UI Popover's trigger

I recently implemented an Angular UI Popover in the following manner: <div popover-is-open="prfList.isProfileClosed===false" popover-trigger="'outsideClick'" popover-append-to-body="true" popover-placement="right-top" popover-class="popover1 ...

javascriptangularjsangular-ui

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

The drop-down menu auto-loads as though it is being hovered over

I recently added a drop-down menu to my website that includes social media buttons. All the buttons are working properly, except for Google+. When the page loads, it seems as though the hover effect is automatically activated for the Google+ button. For e ...

htmldrop-down-menugoogle-plus

Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the co ...

javascriptjquerycssresponsive-design

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

What is the best method for limiting the number of HTML lines retrieved using dangerouslySetInnerHTML in a React application and creating a '... Read More' expander for it? I attempted to use react-lines-ellipsis, but unfortunately the 'tex ...

htmlcssreactjsnpmellipsis

the components progress down the line

For my right column implementation, I decided to use CSS position:relative and put different elements inside in position:absolute as shown below: <!-- Right Column --> <div class="col-xs-3 pl18" style="position:relative;"> <!-- Withou ...

jqueryhtmlcss

Developing dynamic checkbox components using jQuery - unusual behavior in Internet Explorer

I am dynamically creating checkbox elements using jQuery and appending them to a specified node as shown below var topics = ['All','Cat1','Cat2']; var topicContainer = $('ul#someElementId'); $.each( topics, functio ...

javascriptjqueryinternet-explorer

Organizing shared components into a dedicated repository

What is the best way to transfer my React components to a separate repository? I attempted moving the files to a new repo and installing them with npm using the git URL, but when I try to import them they are not functioning as expected. ...

javascriptreactjsnpmes6-modules