Discover how to reveal a hidden div tag upon hovering over a different div tag using CSS

I have a minor issue that I need help with. I want to achieve an effect where one div is displayed when another div is hovered over in CSS. Once the cursor is removed, the second div should be hidden again. How can I accomplish this?

There is a second hidden div that should be revealed when the first div is hovered over, and hidden again when the cursor is removed. How can this be done using CSS?

<div>
  <a href="javascript:void(0)">
    <div class="show-all-hover-zone" style="height: 212px;">
      <i class="fa fa-chevron-left" style="font-size:25px;color:darkslategrey;position:relative;top:97px;"></i>
    </div>
  </a>

  <div style="background-color:whitesmoke;padding: 3px;height:210px;width:0px;position:absolute;top:164px;display:none;" class="expand-menu1">

  </div>

htmlcss

Answer №1

If we consider your scenario 

a:hover ~.expand-menu1{
  display: block !important;
}

However, it is advisable not to use inline styles. There are more elegant solutions available. For instance:

HTML

<a class="hoverOnShow" href="javascript:void(0)">
    <div class="show-all-hover-zone">
        <i class="fa fa-chevron-left" ></i>
    </div>
</a>

<div class="expand-menu1">
</div>

CSS

.show-all-hover-zone{
  height: 212px;
}
.fa-chevron-left{
  font-size: 25px;
  color:darkslategrey;
  position:relative;
  top: 97px;
}
.expand-menu1{
  background-color:whitesmoke;
  padding: 3px;
  height: 210px;
  width: 0px;
  position:absolute;
  top: 164px;
  display:none;
}
.hoverOnShow:hover ~.expand-menu1{
  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

Launch the messaging app with ng-href

Looking for a way to open the SMS app using ng-href, I encountered a strange issue. When I use: href="sms:?body=text" The SMS app opens on my mobile device as expected. However, if I try: ng-href="sms:?body=text" The SMS app does not open on my device. ...

javascripthtmlangularjs

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...

javascripthtmlcssangularfrontend

Steps for performing a 'back' action within a div element using jQuery

Within my HTML, I have a div element containing a link. When the user clicks this link, I use AJAX to load new content into the div area. This new content includes a 'back' link that, when clicked, should revert back to the previous content. Cur ...

jqueryhtmlajax

Passing an undefined value to the database via AJAX upon clicking a button

Hi there, I'm currently working on a table where I'm trying to perform an inline edit and update the value in the database by clicking on a button (an image). I've attempted to use an onclick function, but it seems to show "value=undefined&a ...

javascriptphpjqueryhtmlajax

What is the best way to retrieve a user's country name using C#?

Currently, my code utilizes geolocation to retrieve the user's country name. Take a look at the code snippet below: navigator.geolocation.getCurrentPosition(function (pos) { var latlng = pos.coords.latitude + "," + pos.coords.longitude; var a ...

c#javascriptjqueryhtmlgeolocation

Update the value of the following element

In the table, each row has three text fields. <tr> <td><input type="text" data-type="number" name="qty[]" /></td> <td><input type="text" data-type="number" name="ucost[]" /></td> <td><input ty ...

javascriptjqueryhtml

Adjust the CSS to give <a> elements the appearance of plain text

Is it possible to style an anchor tag to appear identical to plain text? Consider the following scenario: <p> Here is some text and here is a <a class='no-link' href="http://www.example.com" >link</a></p> I have atte ...

htmlcss

The image's max-width property is not functioning as expected within a flexbox layout in Internet Explorer 11, yet it displays

I'm currently working on a 2 by 2 grid layout using flexbox, where the items in the first column are combined together. Check out the setup below: https://i.sstatic.net/fAhtu.png Everything looks great in Google Chrome but unfortunately, I've r ...

htmlcssflexboxinternet-explorer-11

What is the best way to position a Button on the far right of an MUI AppBar?

I'm struggling to grasp the concept of aligning items in MUI. Here is my code snippet: class SignUpForm extends React.Component { render() { return ( <Button sx={{ justifyContent: "flex-end" }} colo ...

cssreactjsmaterial-ui

Stop Chrome from highlighting the canvas section

One interesting feature of our whiteboard application is that Chrome users have the ability to highlight the entire canvas by dragging their mouse in a specific manner: Do you have any suggestions on how we can prevent this behavior? Thank you! ...

csshtml

As a newcomer to Javascript, I am currently working on developing a CRUD-based application and could use some assistance with implementing the Edit functionality

I am currently in the process of developing a Javascript CRUD application that showcases data within an HTML Table. I have successfully implemented the Create, Read, and Delete functions. However, for the Edit function, I am looking to display the data in ...

javascripthtmlarraysjsoncrud

Enhancing Visuals with src="imageUrl within Html"

Is there a way to customize the appearance of images that are fetched from an API imageUrl? I would like to create some space between the columns but when the images are displayed on a medium to small screen, they appear too close together with no spacing. ...

htmlangulartypescriptbootstrap-4sass

HTML and JavaScript - Facing issues rendering HTML content during the conversion process from Markdown format

In this particular scenario, my goal is to transform the content inside #fileDisplayArea into markdown format. However, I am encountering an issue where the HTML code within the div element is not being rendered. <div id="fileDisplayArea"># Title ...

javascripthtmlmarkdown-it

Emphasize sections of text within a chart

Looking for a Specific Solution: I've encountered similar problems before, but this one has a unique twist. What I'm trying to achieve is to search for a substring within a table, highlight that substring, and hide all other rows (tr's) th ...

javascriptjqueryhtml

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

I am facing a challenge with my AngularJS dropdown that uses ng-options. I want to apply both the filter and orderBy components together in the ng-options section. The filter for the select is functioning correctly, but it seems like the OrderBy component ...

javascripthtmlangularjsdropdownng-options

How come user CSS in Stylish takes precedence over the author's CSS?

Here's a sample page: <!DOCTYPE html> <html> <head> <style type="text/css"> body { background: black; } </style> </head> <body> </bod ...

css

Rotating 3D cube with CSS, adjusting height during transition

I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the ...

javascriptjquerycss

Saving data from Material UI forms in TypeScript

Is there an effective method for storing values entered into the text fields on this page? const AddUserPage = () => ( <div> <PermanentDrawerLeft></PermanentDrawerLeft> <div className='main-content'> < ...

javascripthtmlreactjstypescriptmaterial-ui

A guide to personalizing the woocommerce 'best-selling items' widget

WooCommerce widgets are great, but I'm struggling to customize the styling. Can anyone lend a hand? ...

phphtmlcsswordpresselementor

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? https://i.sstatic.net/CQiVh.png (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution ...

cssreactjstypescriptreact-grid-layout