Is there a way to display a group of hidden div's when hovering over them?
For instance:
<div id="div1">Div 1 Content</div>
<div id="div2">Div 2 Content</div>
<div id="div3">Div 3 Content</div>
All div's should become visible when the mouse hovers over them.
If you hide the div elements, they won't be able to trigger the mouseover event.
To make them respond to the event, you'll need to listen for it on another visible element.
One approach is to wrap your hidden divs in container divs that are always visible. Then, you can handle the mouseover event on these containers.
<div style="width: 80px; height: 20px; background-color: red;"
onmouseover="document.getElementById('div1').style.display = 'block';">
<div id="div1" style="display: none;">Text</div>
</div>If you also want the div to disappear when the mouse leaves the container div, you can listen for the mouseout event:
onmouseout="document.getElementById('div1').style.display = 'none';"
One way to achieve this using only CSS is quite simple.
Simply set the opacity to 0 to make it invisible while still being able to interact with JavaScript events and CSS selectors. Then, in the hover selector, adjust the opacity value to make it visible.
#mouse_over {
opacity: 0;
}
#mouse_over:hover {
opacity: 1;
}<div style='border: 5px solid black; width: 120px; font-family: sans-serif'>
<div style='height: 20px; width: 120px; background-color: cyan;' id='mouse_over'>Now you see me</div>
</div>To achieve the toggle visibility effect, you can nest the hidden div within another div and utilize onMouseOver and onMouseOut event handlers in JavaScript:
<style type="text/css">
#hidden-div1, #hidden-div2, #hidden-div3 {
visibility: hidden;
}
</style>
<script>
function showContent(id) {
document.getElementById(id).style.visibility = "visible";
}
function hideContent(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div onMouseOver="showContent('hidden-div1')" onMouseOut="hideContent('hidden-div1')">
<div id="hidden-div1">Hidden Div 1 Content</div>
</div>
<div onMouseOver="showContent('hidden-div2')" onMouseOut="hideContent('hidden-div2')">
<div id="hidden-div2">Hidden Div 2 Content</div>
</div>
<div onMouseOver="showContent('hidden-div3')" onMouseOut="hideContent('hidden-div3')">
<div id="hidden-div3">Hidden Div 3 Content</div>
</div>
Hover your mouse over the container and explore the div elements. I mainly use this for jQuery DropDown menus:
To understand this better, copy the entire code and save it as a .html file. You can experiment with it on your own!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Divs Case</title>
<style type="text/css">
* {margin:0px auto;
padding:0px;}
.container {width:800px;
height:600px;
background:#FFC;
border:solid #F3F3F3 1px;}
.div01 {float:right;
background:#000;
height:200px;
width:200px;
display:none;}
.div02 {float:right;
background:#FF0;
height:150px;
width:150px;
display:none;}
.div03 {float:right;
background:#FFF;
height:100px;
width:100px;
display:none;}
div.container:hover div.div01 {display:block;}
div.container div.div01:hover div.div02 {display:block;}
div.container div.div01 div.div02:hover div.div03 {display:block;}
</style>
</head>
<body>
<div class="container">
<div class="div01">
<div class="div02">
<div class="div03">
</div>
</div>
</div>
</div>
</body>
</html>
Choice A Every individual div is explicitly referenced, ensuring that only those with specific IDs will respond to the :hover pseudo-class.
<style type="text/css">
#div1, #div2, #div3{
display:none;
}
#div1:hover, #div2:hover, #div3:hover{
display:block;
}
</style>
Selection B All divs displayed on the page will exhibit the hover effect regardless of their IDs.
<style type="text/css">
div{
display:none;
}
div:hover{
display:block;
}
</style>
<div
style="width: 100%; height: 100%; background-color: #666;"
onmouseover="this.style.display = 'none';"
>
Greetings Earth
</div>
Hey everyone, I have this JSON external file that I need help with: { "success":true, "errors":[ ], "objects":[ { "cod":"8211300", "descricao":"Serviços advocatícios" }, // more objects here... ] } In ...
Pathway Route::put('path/update',['as'=>'test.update', 'uses'=>'TestController@update']); Ajax Request $.ajax({ url: 'path/update', type: 'PUT', dataType: 'json& ...
Is there a search jQuery plugin that enables real-time filtering based on Div ID as you type in the search box? It would be great if the filter instantly refreshes. ...
After integrating a button group into my new website, I noticed that the first two buttons stop functioning properly on smaller screens. Surprisingly, if I remove the text-center div, all buttons cease to work entirely. Despite attempting various solution ...
I'm working on a directive that's responsible for embedding footnotes into a body of text while providing popover functionality. The text-notes directive is designed to be placed on a parent element, loading content and its related text notes dyn ...
I am currently using display: table and display: table-cell to vertically align multiple divs. However, I have encountered an issue when animating the opacity with jQuery using either fadeTo() or fadeIn. The problem is that it always adds inline style di ...
After watching a tutorial on YouTube about creating a simple login form, I decided to customize it with some personal touches. I wanted to include a "Welcome" text above the login form, but when using h1, the text appeared next to the box rather than abov ...
I have a flexbox div nested inside another div, and I'm trying to adjust the height of the outer box based on the content of the inner flexbox. Here is the link to the current fiddle. The issue I am facing is that the text in the second box overflows ...
Recently, I encountered a scenario where I had a third-party library exporting a React Component in a certain way: // Code from the third party library that I cannot alter export default class MyIcon extends React.Component { ... }; MyIcon.propTypes = { ...
Currently, I am working on enhancing my $resource requests by implementing a straightforward wrapper. The primary objective is to incorporate some logic before the request is actually sent. For guidance, I referred to an informative article authored by Nil ...
When I click on a header from my list, an image should appear. However, I'm encountering an error that needs to be resolved. I've been struggling to find a solution for adding unique keys to multiple elements in order to eliminate the error. Des ...
Need help fetching data inside Angular4 HTML from ts variable. Currently only able to retrieve 2 data points outside the loop. Can anyone assist with pulling data inside Angular4? HTML: <tr *ngFor="let accept of accepts"> ...
I've been developing an app that features a like button on user profiles. However, I seem to have hit a roadblock and can't figure out how to complete it! What am I missing to get it to function properly? Can anyone lend a hand? Utilizing Ajax ...
After following a method highlighted in a forum post to set up an iframe on my webpage, I encountered some issues. To display just a section of the page within the iframe, I utilized the zoom/scale feature available in different browsers. To target a spec ...
In my project, I have implemented 3 Vue components to work together seamlessly. Component A is responsible for listening to an event triggered by a user clicking on HTML text and storing the data into a variable. Component B utilizes this data to make an A ...
After logging out of my PHP session and being redirected to the login page, I am facing an issue where pressing the back button shows me the previous page without requiring a login. How can I fix this problem? Thank you in advance. index.php <form sty ...
I encountered a perplexing issue regarding the responsive resizing of a website on mobile devices. The problem arises when the full height extends over the toolbar/menu, unless the user manually hides the toolbar. Is there a way to dynamically resize the ...
I have created multiple forms using my php code, as demonstrated below. My issue is that when I try to make a jquery-ajax request, I'm not sure how to reference a specific form. My objective is for the relevant form data to be posted when the submit ...
In a recent project of mine, I successfully implemented sticky notes functionality. However, I encountered an issue with browser compatibility specifically related to IE8. Even though the code works perfectly in other browsers, it fails to run in IE8. The ...
Are there any available modules for utilizing node.js as a peer in WebRTC? I am interested in using WebRTC in a client/server manner rather than P2P for its ability to send packets unreliably (i.e. avoiding the delay caused by TCP's guarantee of packe ...