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

Error encountered in thread "main": Issue with parsing string literal

import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; public class FindElementsUsingJS { static WebDriver driver= new FirefoxDriver(); public static void main(Stri ...

javascriptselenium-webdriver

JavaScript code in AJAX response functions properly in browsers like Firefox, Chrome, and Opera. However, it encounters issues in Internet Explorer 11, displaying an error message stating

After searching through various posts, I was unable to find a solution to my question. My query involves requesting a jQuery Datepicker via AJAX. I have provided an example for you to review in Firefox, Chrome or Opera: Ajax javascript example Unfortuna ...

javascriptjqueryajaxinternet-explorer-11

Learn how to pass an id from the query parameters to the getInitialProps function in Next.js

Looking to create a basic website that displays content from a database? Utilizing the getInitialProps function from Next.js documentation can help with server-side rendering: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps#getinitialpr ...

javascriptreactjsnext.jsfetchrouter

Change the className of an element in React upon clicking it

I just finished developing a menu bar using ReactJS with some basic routing features. Here is the JSX code for the component: class TopBar extends Component { state = { menus: [{id:0,menu:"Home"}, {id:1,menu:"Contact"}, {id:2,menu:"About"}] } a ...

javascriptreactjs

Redirecting asynchronously in Node.js with no use of AJAX

I've been struggling with this issue for days and have already sought help, but nothing seems to be working. Whenever I attempt to redirect from a POST request in node, the browser doesn't respond. Here's how my app is structured: ./ confi ...

javascriptnode.jsexpress

Challenges arise when integrating ng-model with Angular Chosen

I'm working with a table that lists users, each row ending with a button that triggers a popup form. Inside the popup, I'm using a multiple select feature with Angular Chosen to display each user's 'interests'. However, despite fet ...

javascriptangularjsjquery-chosenangular-chosen

The overflow scroll feature seems to be malfunctioning and not working as intended in the

I'm trying to implement the overflow scroll property in a div to display a scroll bar for the user, but I'm facing issues. I'm unsure what the problem could be. The code I'm working with can be found here : http://fiddle.jshell.net/Gg ...

htmlcssoverflow

When attempting to call Firebase Functions, ensure that Access-Control-Allow-Origin is set up correctly

Although it may seem straightforward, I am confused about how Firebase's functions are supposed to work. Is the main purpose of Firebase functions to enable me to execute functions on the server-side by making calls from client-side code? Whenever I t ...

javascriptangularfirebasexssgoogle-cloud-functions

JavaScript that Implements MVC Architecture Using C#

When working on a cshtml page within my View, I am able to easily retrieve the URL to an action using this line of code: <h1>@Url.Action("NewComment", "Case")</h1> If I include the same code in JavaScript like this: <script> alert( ...

c#javascriptjqueryajaxasp.net-mvc

The mysterious anomaly in Vue.js

I am attempting to assign a data object named types upon receiving a response in the ready() method. This is what I have: export default { data () { return { types: null } }, ready () { TypeService.showAll(1) .then(functio ...

javascriptvue.js

The automatic refresh feature of the DataTable every 30 seconds is malfunctioning

Currently, I am implementing an application that retrieves records from a database and populates them into a dataTable using JSON. Although my app is functioning correctly, I want to refresh the table every 30 seconds and update any added or modified rows ...

javascriptjquerydatatables

I must first log a variable using console.log, then execute a function on the same line, followed by logging the variable again

Essentially, I have a variable called c1 that is assigned a random hexadecimal value. After printing this to the console, I want to print another hex value without creating a new variable (because I'm feeling lazy). Instead, I intend to achieve this t ...

javascriptstringhex

Before each existing DIV in a loop, a new div is inserted using the insertBefore

const len = document.getElementById('parent').children.length for (let i = 0; i < len; i++) { const div = document.createElement("div"); document.getElementById('parent').insertBefore(div, document.getElementById('parent' ...

javascript

The angular variable is being updated, but the tweet embed code surrounding it is not being refreshed

I've been working with Angular to loop through an array of tweet ids and display them on the page using Twitter's embed code. The issue I'm facing is that although the variable gets updated, the twitter embed remains static. Here's a gl ...

javascriptangularjs

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

javascripthtmlcssangularsvg

Utilizing ng-class for dynamic routing and controlling

I am currently in the process of developing a dynamic framework using AngularJS. My plan involves allowing users to add new templateUrl and controller from a JSON file, like the one shown in templates.json: { "pages" : [ { "name" : "home" ...

javascriptangularjsjsontemplatesdynamic

Learn the ins and outs of utilizing *ngIf in index.html within Angular 8

Can anyone explain how I can implement the *ngIf condition in index.html for Angular2+? I need to dynamically load tags based on a condition using the *ngIf directive, and I'm trying to retrieve the value from local storage. Below is my code snippet b ...

javascripthtmlangularangular8

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations

What is the best method for testing routes implemented with the application router in NextJS? My go-to testing tool for this is vitest

Is it possible to test routes with vitest on Next.js version 14.1.0? I have been unable to find any information on this topic. I am looking for suggestions on how to implement these tests in my project, similar to the way I did with Jest and React Router ...

javascripttestingnext.jsvitestapp-router

Tips for identifying and logging out a dormant user from the server side using Angular 2 Meteor

I'm currently diving into Angular 2 Meteor and working on a project that requires logging out the user when they close their browser window. I also need them to be redirected to the login page when they reopen the app. After searching online, I could ...

javascriptangularmeteorangular2-meteor