The easiest way is to assign position: relative to the a elements, and then increase the z-index of the a > img:hover (instead of styling the a:hover: a > img { position: relative; } a > img:hover { outline: 3px dotted blue; z-index: 3000; } JS Fiddle demo.
Try using CSS-Tricks’ Infinite Borders technique and applying border-radius. This method will require borders and box-shadow and not outline. img { border-radius: 4px; /* #1 */ border: 5px solid hsl(0, 0%, 40%); /* #2 */ padding: 5px; background: hsl(0, 0%, 20%); /* #3 outline: 5px solid hsl(0, 0%, 60%); */ /* #4 AND INFINITY!!! (CSS3 … Read more
Here is a 100% SwiftUI solution. Not perfect, but it works and it gives you full SwiftUI control of the resulting view. import SwiftUI struct SomeView: View { var body: some View { StrokeText(text: “Sample Text”, width: 0.5, color: .red) .foregroundColor(.black) .font(.system(size: 12, weight: .bold)) } } struct StrokeText: View { let text: String let … Read more
According to MDN: The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single declaration So when you set outline to none or 0, you are actually telling the browser to set 3 properties (outline-style, outline-width and outline-color) I used Firefox … Read more
To get around the problem you can use border-bottom, with it set margin-bottom: -1px (the size of the border). This will stop it from moving the content below. HTML: <div></div> test CSS: div { width: 100px; height: 100px; background: #eee; } div:hover { width: 100px; height: 100px; background: #eee; border-bottom: 1px solid; margin-bottom: -1px; } … Read more
You can just use this: a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; }
I see .btn:focus has an outline on it: .btn:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } Try changing this to: .btn:focus { outline: none !important; } Basically, look for any instances of outline on :focused elements — that’s what’s causing it. Update – For Bootstrap v4: .btn:focus { box-shadow: none; }
Try: -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; // i.e. Nexus5/Chrome and Kindle Fire HD 7”
Hit CTRL+R, or CMD+R for Mac, for the function list. This works in Sublime Text 1.3 or above.
From: http://webdesign.about.com/od/advancedcss/a/outline_style.htm The CSS outline property is a confusing property. When you first learn about it, it’s hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences: 1.Outlines do not take up space. 2.Outlines may be non-rectangular.