Stacked div elements have a border on hover.
However, when hovering over a div, both the hovered div and its parent div get borders.
<div class="container">
<div class="button1">
<div class="button11">
<div class="button12"></div>
</div>
</div>
</div>
I am struggling to achieve the desired effect:
When hovering over a div, only that specific div should receive a border.
Thank you in advance for your help.
To optimize the layout, utilize absolute positioning and nest your div elements within a relatively positioned container. Check out the revised code snippet below...
https://jsfiddle.net/zekw31gq/4/
HTML
<div id="container">
<div id="red"></div>
<div id="blue"></div>
<div id="black"></div>
</div>
CSS
#container {
position: relative;
width:300px;
height:300px;
}
#red {
position: absolute;
width:300px;
height:300px;
background:red;
border: 4px solid transparent;
}
#blue {
position: absolute;
margin:25px;
width:250px;
height:250px;
background:blue;
border: 4px solid transparent;
}
#black {
position: absolute;
margin:50px;
width:200px;
height:200px;
background:black;
border: 4px solid transparent;
}
#red:hover {
border-color: darkred;
}
#blue:hover {
border-color: darkblue;
}
#black:hover {
border-color: white;
}
Can anyone assist me in setting up a straightforward enabled/disabled radio button grouping on my form? My idea is to utilize an image of a check mark for the enabled option and an X for disabled. I would like the unselected element to appear grayed out ...
How can I make my button responsive? I have a button on an image within a slider. It looks good and works fine on desktop, but on mobile it appears too big and gets overlapped with the slider radio icons, causing the "read more" link button to not redirect ...
Why am I experiencing strange right margin space even though I haven't set any margin-right properties? I have already used a CSS reset with *{margin:0;padding:0;}, so there should be no reason for the margin-right spacing between all ul sections. T ...
Whenever the screen size changes in my code, the collapse icon appears. However, when I click on that icon, none of the contents are visible. Another issue I am facing is that I want the background of the section element to be an image. So, I added a back ...
Is it possible to apply a different color to lowercase letters in a text area? I am looking to highlight all lowercase letters in red while keeping the uppercase letters black. ...
I am in need of a one-line editable paragraph that can contain text without overflowing its size. Currently, I am using CSS to hide the overflow and prevent multiple lines by not displaying the children of the paragraph. However, what I really want is fo ...
How can I remove the bars on the side of the navigation bar when hovering over it? I don't want to alter the appearance or position of the navbar itself, just the parts that are affected by hovering over it. HTML: <!DOCTYPE html PUBLIC "-//W3C//D ...
I need to update the tooltip for a textbox in asp.net. TextBox objTextBox; objTextBox = new TextBox(); if (somecondition) { objTextBox.ReadOnly = true; String processorClosedTooltip ="<html><p style='font-style:italic;color:blue;'>" ...
How to Position User Data in Front of Profile Image I am currently struggling with positioning the user data in front of the profile image (the round one with the letter). I have shared my code below: <div class="conta"> <p>Logg ...
I am utilizing a service that provides me with dynamic HTML containing labels and inputs as shown below: input:after { content: "\a"; white-space: pre; } <label for="username">Username</label> <input type="text" id="username" nam ...
I've been experimenting with creating angled divs on a webpage, where each basic panel is separated by an angled break. The idea is to have the background-image of one div flow smoothly into the background-color of the next div. Since I couldn't ...
Is it possible to link an external CSS file stored in Dropbox with HTML? I have followed all the instructions I could find online, including clicking and pressing "Copy Dropbox Link" to generate an href link. However, it doesn't seem to be working. ...
I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...
Whenever I reduce the size of my browser, the collapsible navbar in Bootstrap is not visible. This is the code for my webpage: index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv=" ...
Is there a way to style the underlying html textarea of a vuetify v-textarea using CSS? I'm trying to customize the line height, font family, color, and more of the v-textarea component. Simply adding a class to it doesn't seem to work: <v-tex ...
Just getting started with SCSS and trying to maintain high quality cover images on my website. The CSS seems to be working fine, but the SCSS is giving me some trouble. SCSS #page-login-index { @media screen and (min-aspect-ratio: 5/4) { background-c ...
I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...
When reviewing the Bootstrap 5.2 validation documentation, https://getbootstrap.com/docs/5.2/forms/validation/ "It has come to our attention that the client-side custom validation styles and tooltips are not accessible at this time, as they are not ...
Here's the code snippet: <asp:TextBox ID="txtAddress" CssClass="s175" runat="server" MaxLength="30" placeholder="Street"></asp:TextBox> After rendering, it looks like this: <input name="ctl00$LeftColumnContent$txtAddress" type="text" ...
Currently, I am integrating a ReactJS application using Material UI styled components within a Wordpress page. To achieve this, I am utilizing webpack for transpilation of the JavaScript. After generating the bundle for the embedded version of the applica ...