The hover state of a div will not be lost if its parent element is not being hovered over

When hovering over the second, third, or fourth item, hidden text will appear on the left side.

If you hover your cursor over the hidden text, it will disappear again.

I want to be able to hover over the second item, move my cursor to "hide", and click on it. Can this be achieved with CSS or JS?

The HTML:

 <div class="container">
    <div class="item">item
       <div class="hide">hide</div>
    </div>
   <div class="item">item <div class="hide">hide</div></div>
   <div class="item">item <div class="hide">hide</div></div>
   <div class="item">item <div class="hide">hide</div></div>
  </div>

The CSS:

.container {
  display: flex;
  position: relative;
}

.item {
  padding: 1px;
  cursor: pointer;
}

.hide {
    opacity:0;
    position:absolute;
    left:0;
}


.item:hover .hide {
  display:block;
  opacity: 1;
}

My codepen example here

I attempted to increase the width of the hide element, but it did not work as intended

.hide {
    width:100vw;
}

Is there a way to expand the width of the hide element, or another method to ensure the "hide" function remains accessible even when the parent element is not hovered over?

javascripthtmlcssvisible

Answer №1

I made some adjustments to the code in order to enhance the layout. The main issue seems to be related to the last line of CSS I included, where it checks if the .hide element is being hovered over.

.container {
  display: flex;
}

.item {
  padding: 1px;
  cursor: pointer;
  float:left;
  width:100%;
}

.hide {
    opacity: 0;
    position: absolute;
    left: 0;
    width:100%;
    pointer-events:none;
}


.item:hover > .hide, .item > .hide:hover {
  display: block;
  opacity: 1;
  pointer-events:all;
}
<div class="container">
    <div class="item">item
       <div class="hide">hide1</div>
    </div>
   <div class="item">item <div class="hide">hide2</div></div>
   <div class="item">item <div class="hide">hide3</div></div>
   <div class="item">item <div class="hide">hide4</div></div>
  </div>

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

pressing a button unrelated to the 'close' button still triggers the close event

I have a notification bar that features a button in the center that links to another website. There is also a 'close' button on the far right. However, whenever I click the center button, it also triggers the close button. I tried moving the #cl ...

javascripthtmlcss

Align two columns using the vertical alignment feature in the Bootstrap grid system

Is there a way to horizontally align an element within a bootstrap grid? In the code snippet below, I have a col-md-4 and another col-md-8 that I would like to vertically align in the middle, as shown in the image. Click here for a demonstration. This is ...

htmlcsstwitter-bootstrapgridview

Encountering an error while trying to add text: SyntaxError - Unexpected token 'for

I'm trying to print out the elements of an array using JavaScript. let listToArray = ["a","b","c"]; $(".tooltip").append(for(let i = 0; i < listToArray.length; i++) {listToArray[i]}); But I keep getting an error that says Uncaught SyntaxError: U ...

javascriptjquery

Guide on setting up Tailwind CSS and material-tailwind concurrently within the tailwind.config.js configuration file

I am looking to integrate both Tailwind and Material Tailwind in a Next.js 14 project. Below is my customized tailwind.config.ts file (already configured with Tailwind CSS): import type { Config } from 'tailwindcss' const config: Config = { ...

javascriptnext.jsmaterial-uitailwind-cssnext.js13

Mastering state management for various input types in React

Developing a proof of concept for showcasing tennis player details on a webpage. The page can display information for any number of players, and the user should be able to update all player details simultaneously. I have created 3 components: PlayersPage, ...

javascriptnode.jsreactjs

Discover the steps to execute a continuous loop of animations on a singular component using framer-motion

I'm currently working on a website that incorporates framer-motion for animations One key component of the site is an image displayed as follows: <motion.img ref={scope} initial={{ x: -200 }} alt="pa ...

javascriptreactjsanimationnext.jsframer-motion

Tips for formatting strings to be compatible with JSON.parse

I'm encountering an issue with my node.js application where I am attempting to parse a string using JSON.parse. Here is the code snippet: try{ skills = JSON.parse(user.skills); }catch(e){ console.log(e); } The string stored in user.skill ...

javascriptjsonnode.js

What is the best way to add a hyperlink to a specific section using Html.ActionLink in MVC?

Recently, I dove into the world of MVC and came across a puzzling issue. There's this HTML page that smoothly scrolls down to a specific section when you click on its name from the navigation bar. However, now I need to convert this piece of HTML code ...

htmlasp.net-mvc

Creating a cascade of falling balls with a single click: Here's how!

I'm currently working on a project where I have a ball dropping from the cursor location and redropping when the cursor moves to another position. However, I want to be able to create a new ball every time I click the mouse. I attempted the following ...

javascriptcanvashtml5-canvasdom-events

JustGage error: Unable to locate element with ID 0 in AngularJS

I developed a custom directive for the JustGage plugin, here is how it looks: function justGage() { return { restrict: 'E', replace: true, scope: { universalId: '@', ...

javascriptangularjsjustgage

combine two columns into a single responsive list group item

Using Bootstrap 4, I created an item list and divided it into two columns (see image). However, when I resized the website to a mobile size screen, it displayed like this: https://i.sstatic.net/0iPHm.png My desired outcome is for the list to display in o ...

csshtmlbootstrap-4css-grid

Having trouble generating an HTML table from JSON data using JavaScript

My attempt to generate a table with data from an external .JSON file using JavaScript is not working as expected. Everything worked fine when the data was hardcoded into the .JS file, but once I tried to fetch it externally using "fetch", the details do no ...

javascripthtmljsonhtml-table

Sort through an array containing JavaScript objects in order to filter out certain elements that match a different

Below is a fictional JavaScript array made up of objects: const permissions = [ { moduleEnabled: true, moduleId: 1, moduleName: 'Directory' }, { moduleEnabled: true, moduleId: 2, moduleName: 'Time off' } ...

javascriptarraysfilter

tips for incorporating jade Mixin in JavaScript

Experimenting with test mixins in jade language mixin test(testName) #test span Test String Desire to incorporate this functionality into javascript (as declared in the jade file) script(type='text/javascript'). $( document ).on( "cli ...

javascriptnode.jspugmixins

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

I've been having trouble getting this to work and I've attempted various solutions suggested by different sources such as: Display live width and height values on changing window resize php echo statement if screen is a certain size And more, b ...

javascriptphpjqueryhtmlajax

Guide on accessing POST data in jQuery

Similar Question: how to retrieve GET and POST variables using JQuery? This is the HTML snippet I am working with: <form action='.' method='post'>{% csrf_token %} <div class="parameters"> Show & ...

javascriptjquerypythonajax

Rendering on the server using react-router v4 and express.js

I've been working on implementing server-side rendering with the latest version of react-router v.4. I found a tutorial that I followed at this link: . However, when I refresh the browser, I encounter the following error: Invariant Violation: React.C ...

javascriptnode.jsreactjsexpressreact-router

Troubleshooting: The issue of importing Angular 2 service in @NgModule

In my Angular 2 application, I have created an ExchangeService class that is decorated with @Injectable. This service is included in the main module of my application: @NgModule({ imports: [ BrowserModule, HttpModule, FormsModu ...

javascriptangulartypescript

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

HTML <div class="box1"></div> <div class="box2"> <div class="box3"></div> </div> CSS Properties of box1, box2 and box3 are: box1 { position: absolute; z-index: 100; background-color: rgba(39, 39, 39, 0.3) ...

javascriptjqueryhtmlcss

Responsive Design and Advertising with CSS Media Queries

For my application, I am utilizing Twitter's bootstrap (responsive) css. My goal is to incorporate banner ads in the sidebar section. However, due to different media query settings, the sidebar's width will vary, resulting in the need for the ban ...

csstwitter-bootstrapresponsive-designadsbanner-ads