When an element with a border attribute is hovered over, it shifts position

When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet:

#overview li:hover {
    background: rgb(31, 31, 31);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

Check out this JSFiddle example, where you can hover over the navigation on the left.

The issue is that it causes the li element to shift by 1 or 2 pixels when hovered. I attempted to add a margin-top: -1px for the hover state, but it didn't fix the problem.

Do you have any suggestions?

htmlcss

Answer №1

apply a transparent border to the <li> element when it is not being hovered over, and only change the color of the borders when it is being hovered over

#overview li {
   padding: 5px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
}

#overview li:hover {
   border-color: #fff;
   /* other style ... */
}

(I tested this on your fiddle and it seems to be working fine)

Answer №2

The reason for the issue is that a border is being applied to the li element when it is hovered over. To resolve this, one potential solution is to reduce the padding by 1 pixel in order to offset the impact of the extra border.

For further reference, you can view an example at: http://jsfiddle.net/pzxLT/3/

Answer №3

A helpful tip would be to start by adding a 1px top margin initially, then adjusting the margin to 0 on hover to offset the 1px top border. Another approach is to modify the padding instead of the margin.

Answer №5

check out the latest updates here: http://jsfiddle.net/rwDYR/5/

Alternatively, you can opt to use the same background color for the border.

#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}

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

Combining PHP and HTML: Utilizing nested foreach loops with interspersed HTML code

Attempting to create a layout of items using an Accordion arrangement (from Bootstrap) has led me to retrieve data from a pgsql db. Fortunately, the data retrieval process is successful. The challenge lies in displaying this data, as I am encountering an ...

phphtmlpostgresqltwitter-bootstrap-3

CSS: Continuous Automated Slide Transitions

What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included ...

css

Create animated changes in height for a mdDialog as elements are shown or hidden

Utilizing Angular Material, I have implemented tabs within an md-dialog. The dialog smoothly adjusts its height based on the content of the active tab during navigation. However, when utilizing an ng-if directive to toggle visibility of content, there is n ...

cssangularjsangular-material

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

What is the proper way to define an element's style property in strict mode?

Assuming: const body = document.getElementsByTagName('body')[0]; const iframe = document.createElement('iframe'); iframe.src = protocol + settings.scriptUrl + a; iframe.height = 1; iframe.width = 1; iframe.scrolling = 'no'; ...

javascriptcss

Ways to deselect checkboxes and eliminate validation requirements

Below is the HTML code snippet that I am working with: <div class="form-group"> <div class="input-group"> <label for="daterange-vacancy" class="input-group-addon">Van</label> ...

javascriptjqueryhtmlcheckboxcalendar

When the previous textbox is filled, the cursor will automatically move to the button

Utilizing an RFID reader where students tap their ID to display basic info, a hidden button on the form opens a modal with various purposes for selection. The challenge is shifting focus of cursor to the button and automatically clicking it when the last ...

javascriptphpjqueryhtml

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

javascriptcssvue.js

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Issues with JQuery OnClick Function Detected

I am struggling with an issue related to the scripts in the <head> section of my website: <script src="scripts/jquery-1.11.0.min.js" type="text/javascript"></script> <script> $('#submit').click(function() { $('#submi ...

jquerycssbackground-image

Ways to retrieve HTML tags from a website's DOM and shadowDOM

I am currently working on a project using NodeJS where I need to extract the HTML structure of multiple websites. However, I am facing some challenges with this task. My goal is to retrieve only the HTML structure of the document without any content. It is ...

javascripthtmldomshadow-domtreewalker

Responsive design and column alignment dilemma

I'm attempting to create a layout using Bootstrap 3.2.0 with tiled divs in a single row for screens wider than 768px. The divs have heights of either 50px or 100px, controlled by the classes "home-height-single" and "home-height-double," and widths ad ...

htmlcsstwitter-bootstraptwitter-bootstrap-3css-float

Having trouble with displaying the modal dialog in Twitter Bootstrap 3?

There seems to be an issue with my Twitter Bootstrap modal as it is not rendering the dialog box correctly, and I'm puzzled about the reason behind this. HTML <p class="text-center btn-p"><button class="btn btn-warning" data-toggle="modal" ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

The placement of footers remains consistent

Struggling with the placement of my footer on a website I'm designing. The footer should be at the bottom of the page with a set percentage margin, but it's not working as expected. Here is a link to My website Reviewing the footer CSS: .foote ...

htmlcss

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

javascriptcssreactjsjss

Adjust the background shade of the HTML <area> tag

I have an image containing over 100 geometrical shapes, each with unique sizes and dimensions. I utilized image mapping to assign IDs to each <area> tag such as <area id="1">. I stored information in a MySQL database about each shape, ...

phpmysqlhtmlcss

CSS experts caution that the addition of margin and padding can cause the screen to jump

When I apply margin and padding to this class, it starts glitching like in the second GIF. However, if I remove margin and padding everything works fine, but I do need them for styling purposes. What could be causing this issue and how can I resolve it? ...

htmlcss

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

javascripthtmlangularangular-pipe

CSS transitions/transforms are failing to impact the necessary elements

I'm currently grappling with advanced transitions and transforms, and encountering some challenges with a section I'm developing. I've managed to get everything working as needed, except for the fact that there is an h5 element positioned ov ...

htmlcsscss-transitionscss-transforms

Improprove Google PageSpeed score - must resolve

My mobile website is loading incredibly slow, despite my attempts to improve the speed using Google PageSpeed insights. Unfortunately, I'm having trouble interpreting the screenshot and identifying what changes need to be made. Is there anyone who c ...

jqueryhtmlcsspagespeedgoogle-pagespeed