When the hover event is used over a <div>, it triggers an additional description to appear about the element.
An issue I am facing is that hovering on one <div> causes the others to shift around. Ideally, I would like everything else to remain in place and have the word blob simply appear on top of them.
Check out this example illustrating the problem: jsfiddle
What adjustments can be made so that the other blocks stay static when hovering?
Your additional_information should be set to absolute positioning within the section element
.link{
position:relative;
margin : 2em 0em 2em 1.5em;
float: left;
width: 10.4em;
min-height: 17em;
max-height: 18.5em;
text-align: center;
padding: 0em 0.1em 0.1em 0.1em;
background-color: #276277;
}
.section { position:relative; float:left; }
.additional_information{
z-index: 900;
position: absolute;
top: 30px;
left: 30px;
display: none;
width: 275px;
background: #FFFFBC;
border-style: inset;
border-width: 5px;
}
In addition, I recommend utilizing jQuery for this task
$('.link').hover(function() {
// show the information box
$(this).siblings('.additional_information').toggle();
});
Check out a comprehensive demonstration here
Explore this illustration where the additional information is displayed above each parent section
You forgot to include an underscore.
<div class="additional information">
needs to be changed to
<div class="extra_information">
As a newcomer to jQuery, I have successfully created a vertical menu. My objective is as follows: When the first list item is clicked, it should display the submenu. Clicking on the second list item will show the level 1 submenu while closing the first on ...
Two floating <div>'s are styled with classes .a and .b. Both <div>'s are floated to the left, each taking up 50% of the width, aligning them horizontally. On smaller screens, I want both <div>'s to be aligned vertically. ...
I am attempting to create a unique slider that combines both images and videos. Despite trying to implement it using bootstrap, I have been unsuccessful so far. See the code snippet below: <div id="carousel-slider" class="carousel slide carousel-fade ...
Whenever I attempt to add an item to the cart, it only adds it once. If I try to do it again, it ends up overwriting the existing item and the counter for the items in the cart remains at 1. I've experimented with switching between a button and a lin ...
Here is the current code snippet that I have: (category=="Ljud & Bild") ? byId("nav_sub_ljud_bild").style.display='block' : byId("nav_sub_ljud_bild").style.display='none'; (category=="Datorer") ? byId("nav_sub_datorer").style.disp ...
I am developing a calculator and implementing eventListeners to the number buttons using JavaScript. Here is the code snippet: document.addEventListener('click', e =>{ if (e.target.matches('#num1')){ const x = document.cr ...
I am presenting the code below: <div class="settingsMenu" style="top: 135px; left: 149px; display: block;"> <ul> <li class="download" onclick="downTemplate('template1')">Download</li> <l ...
Recently, I added some menu links in the blue area on . However, I am now looking to add a right aligned link while keeping the others left aligned. My attempt using [method] didn't work. Any suggestions on how I can achieve this? ...
Picture a typical web application page that utilizes jQuery and Knockout to create modal dialogs for data editing. The process runs smoothly as the page loads, with the JS generating the dialogs when buttons are clicked. However, there is a slight issue wh ...
Greetings! I am currently working on creating a JSFiddle based on the official THREE.js HUD Sprites example. However, I am facing an issue where the sprite images do not seem to load or apply using the URLs specified in the original file:- //... URL' ...
The issue I'm facing is that the other Div is not appearing above the background. My goal is to have the background fill the entire screen. <title>The Ultimate Cube World Resource!</title> <link href="style.css" rel="stylesheet" type=" ...
Here is the link to my code snippet: fiddle. I am struggling with aligning shopping bag icons at the bottom of each box on my webpage. I want all boxes to have the same height, so I used display: table-cell; in the box_left div. However, placing the shopp ...
* Tournament Brackets Tree Web Page In the process of developing a responsive tournament brackets tree web page. * Connection Challenge I am facing an issue where I need to connect each bracket, represented by individual divs, with decorative lines linki ...
Seeking advice on JS / CSS / HTML programming! I may not be the best at articulating my question, so I apologize for any confusion. Let me clarify my intention behind this specific code section and explore potential solutions. The goal is to allow users ...
I'm experiencing an issue with the onClick() methods in my code. There are two onClick() methods present on the UI, but when I click on the second one, it does not call the method while the first one does. I am struggling to figure out why this is hap ...
Looking to transform this row of images... https://i.sstatic.net/UWBUy.png I need to create a small carousel for displaying the images on mobile devices (Responsive Design) using bootstrap. Here is the code for the current arrangement of images: <div c ...
Currently experiencing a two-part issue, one relating to CSS and the other to codebehind. Below is the navigation code for my buttons: <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Buttons/upviewassets.png" OnClick="ImageButton1_Click" ...
When working with CSS, it's possible to set various properties of a linear gradient such as color, position, orientation, and width. However, is it feasible to define its length? I prefer not to use SVG and am specifically looking for a CSS-based solu ...
My HTML setup looks like this: <div class="row"> <div class="col-sm-12 col-md-6 col-xl-3"> </div> <div class="col-sm-12 col-md-6 col-xl-3"> </div> <div class="col-sm-12 col-md-6 col-xl-3"> </d ...
function updateActiveClassOnMenu($item_output, $item, $depth, $args) { $menu_locations = get_nav_menu_locations(); if ($item->menu_order == 1){ $item_output = preg_replace('/<a /', '<a class="active" ', $item_o ...