1
Adding a border to the state of the anchor without affecting the rest of the ele...
source link: https://www.codesd.com/item/adding-a-border-to-the-state-of-the-anchor-without-affecting-the-rest-of-the-elements.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Adding a border to the state of the anchor without affecting the rest of the elements
advertisements
I want to add a border on the left and right hand side of the hovered item in my navigation. This works, but seeing that I am adding 2px to the element it pushes the other elements out. How can I add the border to almost be on the inside of the hovered a list item without it affecting the remainder of the navigation?
// Simple example:
li {
list-style: none;
display: inline;
}
li a:hover {
border-left: 1px solid black;
border-right: 1px solid black;
}
// HTML:
<ul>
<li><a href="">Test 1</a></li>
<li><a href="">Test 2</a></li>
<li><a href="">Test 2</a></li>
</ul>
Or visit jsfiddle link for an active example.
I would add a transparent border to your a tags:
li a {
border: 1px transparent solid;
border-width: 0 1px;
}
Related Articles
Adding glow / border to the edge of only the non-transparent part of an image using javascript
I'm trying to come up with a way to mimik something we were previously doing in Adobe Flash using some sort of Bitmap Filter but instead with pure javascript. Previously we had a set of PNG images w/ transparency around the core image. When an image
Mac OS X - adding a border to the terminal
I am using the terminal on Mac OS, but all the terminal's windows are borderless, making them difficult to distinguish when they are one over the top of the other. I can't find the way to add a 1px border around the window (my terminal's windows are
Adding a border to the image (plot) in a PPTX generated by python and matplotlib
I have a plot which is generated by matplotlib then I save it as .png and then I place it on a PPT file using the pptx module. I want to add the border of the pic in my PPT file can any one please help me for the code..?? from pptx.util import Inches
The height of the line and the inline block cause a space between the border and the element
I have been working with bootstrap for quite sometime now , i just came across a odd behavior when using inline-block instead of float , before i describe my entire problem , let me say that i don't use inline-block extensively and also the error see
Adding a string to the elements of a bash array, but not if the array is empty
I want to attach a string to each of the elements in an array in bash, but not if the array is empty. Currently this works for non-empty arrays: $ cat this.sh #!/bin/bash lst=$@ lst[0]="a" lst[1]="b" echo ${lst[@]/%/.ext} $ bash this.s
How to modify the HTML and BODY tags in an ASP.NET page without adding runat = server to the elements?
In an ASP.NET web forms project that is not quite ready to be upgraded from 2.0 to 4.0 , there is a change that needs to be made to allow modifications to the HTML and BODY tags on the pages without adding runat=server to the tags which results in th
Add a border to the element while keeping the parent element at the same height
I'm looking to add a border to an element on hover while also keeping the parent div size the same. Currently when I add the border it makes the parent div larger in height. nav { margin: 0px auto 1px auto; padding-bottom: 1px; display: inline-block;
JQuery add the lower border to the element
I am trying to add a bottom border to an element when the user has scrolled after a certain point. For some reason this script is doing nothing. The code is as follows: $(document).ready(function(){ $(window).scroll(function(){ var posFromTop = $(win
Border for the elements of the table line in android
How i can achieve view like below screen shots (1 expected result, 2 Actual result). As you can see each items have border it is like left and bottom for some items and for some items it is right & bottom. I have created view using TableLayout but no
NullReferenceException when adding an attribute to the element in xml using c #
I get a NullReferenceException when trying to append element to its parent to element, like this XmlDocument dartDatabase = new XmlDocument(); string path = @"D:\xml\dartDatabase.xml"; ... dartDatabase.Load(path); XmlNode newGame = dartDatabase[
Imageview shows the border around the photo that does not exist in the source image
I'm trying to display a simple image in an imageview and it seems to be adding a border around the photo that isn't there in the source image. I placed the imageview in the parent view and set the image to it, and in the editor you can see a small sl
Add a class to the element in scroll mode (scrollable division)
Is there a solution for adding a class to the element in view when scrolling, and removing when out of view? This needs to work for a scrollable div. I have found a few solutions so far but they only seem to work for body... not a scrollable div. I a
Added a border around .nav-tabs to double the top border for the .active class
I've done a lot of research and can't come up with an elegant solution to this issue. What I'd like is a border around my nav buttons so I do this: .nav-tabs{border:1px solid #ddd;} The problem is the active class appears to double up my top border (
adding the bottom border on the hovering navigation without changing position on anything below
I want to make my navigation have bottom border while in hover, but then it moves all my content 3px down. How do I make it work without moving all content down. CSS of navigation : nav { width: 80%; margin: 0 auto; } nav ul { list-style-type: none;
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK