Prevent border duplication in CSS and retain border visibility

Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, causing them to cover up the border of the one above and creating an appearance of even borders all around.

I decided to add a hover effect to my divs by using the following CSS:

#main div:hover {
    border-color: #09C;
}

The problem now is that since the borders of the top two divs are covered by the ones below, the hover effect doesn't look correct (the bottom border of each div seems to be missing).

My goal is to only have a 2px border between each div while applying a hover effect for the entire border of that div. How can I achieve this?

htmlcssborder

Answer №1

If you want to change the top border color of the next div when a div is hovered, simply add this selector:

#main div:hover + div {
    border-top-color:#09C; 
}

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

Tips for accessing values from a bs4 result set in Beautiful Soup?

Is there a way to extract all the title values from this bs4 result set? [<span class="zaman" title="16.3.2022 15:22:44">1 hf.</span>, <span class="hide zaman pull-right ml-5 mt--1">( Message Deleted )</sp ...

pythonhtmlweb-scrapingbeautifulsoup

Add an arrow or triangle at the tip of the line

I am currently working on recreating the design of lines with an arrow or triangle at the end side of an Input form. The inspiration for this comes from an old flash application that is now being converted to HTML5: So far, I have managed to create the li ...

csshtml

Navigate the conversation within the dialog without affecting the content below

Is it possible to have a dialog with scrollable content on top of a page that is also scrollable, but when trying to scroll inside the dialog using the mouse wheel, only the dialog body scrolls and not the page below it? What approach can be used to accom ...

javascriptjqueryhtmlcss

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

javascripthtml

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

javascripthtml

ng-click event not firing after $compile in AngularJS

I'm struggling to get my dynamic HTML elements generated from an AngularJS controller to trigger a function using ng-click. Even after using $compile, the function is not being called. Check out my JS code: var accountApp = angular.module('acco ...

htmlangularjsangularjs-ng-click

Ionic 4 Tabs with Smooth Scrolling

I recently started using Ionic 4 and I'm trying to create scrollable tabs in Ionic 4. However, when I include multiple tabs as shown in the code below, they become compressed and appear within the same viewing space. <ion-tab-bar slot="top"> ...

cssangularionic-frameworkionic4

The stacking order of elements is not affected by the z-index property when using absolute positioning

I have developed a unique custom toggle switch component with the following structure: <template> <div> <label class="switch"> <input type="checkbox" :checked="value" @c ...

javascripthtmlcssvue.js

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

The custom styles in Material-Table are taking precedence over all other styling, including Material UI styles, and causing icons to not

I recently started using the Material-Table component for a project I'm working on, and it's been great for managing tables with features like adding, editing, deleting, and searching rows. However, I've run into a few issues that I need hel ...

cssreactjsiconsmaterial-uimaterial-table

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

javascriptcssreactjstypescriptvue.js

Is it possible to incorporate HTML and CSS into Kivy and Python 3 development?

Currently in the process of creating a multi-touch kivy program using Python 3.52 on Linux. While Kivy is effective, I've encountered challenges with GUI development and experienced laggy animations. I've noticed that my program tends to slow do ...

pythonhtmlcssembeddedkivy

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

javascriptjquerycsshtml

The next column featuring a dropdown menu

My goal is to make this sketch operational. The red elements in the sketch need to be programmed. Currently, I am using angularJS and bootstrap with the following code: <div class="col-md-6"> <div class="form-group"> <label&g ...

javascripthtmlcssangularjsbootstrap-modal

Vuetify 3 now displays full text in v-autocomplete without an ellipsis

Trying to truncate long text in a v-autocomplete component using Vuetify 3 and text-overflow: ellipsis, but it's not working. Check out the code below: <div id="app"> <v-app id="inspire"> <v-row align="cen ...

javascriptcssvuetify.jsv-autocomplete

Creating AngularJS variables with dependencies on integer values

Hello, I am a brand new developer and I am currently working on creating an expenses calculator. The goal is to have the sum of inputted integers from a table, each with a default value, become the integer value of another variable. However, I seem to be m ...

javascriptangularjshtmlscopedata-modeling

Identify input elements that specifically contain an onclick event

Several of the input elements on my page have a function called setSomeFunction() that either shows or hides certain divs when clicked. I know I can locate all the input elements using document.getElementsByTagName("input") and store them in an array. How ...

javascripthtmlgetelementsbytagname

Modifying the URL of an image based on screen size with the @media property

Currently working on developing a responsive webpage. An interesting challenge is presenting two distinct images for the desktop and mobile views. Attempted to switch between images by utilizing the @media feature within CSS, as shown below. #login-top-s ...

htmlcssimageuser-interfaceresponsive-design

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found Howeve ...

cssreactjs