I have a series of icons in my navigation. They should appear white by default, blue on hover. When the icon is clicked it gets an 'active' class assigned at which point it should still be white by default, but also white on hover.
In IE8 after class 'active' is assigned it stays blue, regarles of hover. I have this doctype on my page:
<!DOCTYPE html>
This is my CSS:
.appNav div {
color: #ffffff;
}
.appNav div:hover {
color: blue;
}
.appNav div.active {
color: #ffffff;
}
.appNav div.active:hover {
color: #ffffff;
}
Edit: as rink.attendant.6 asked, I'm using fontawesome for my icons, so they're font text icons.
There is no reason this should not work in IE 8
The :hover pseudo-class applies while the user designates an element
with a pointing device, but does not necessarily activate it.
See : http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act for details.
Also :
Starting with Windows Internet Explorer 7, when the browser is in
standards-compliant mode (strict !DOCTYPE), you can apply the :hover
pseudo-class to any element, not only links. If the pseudo-class is
not applied specifically to an element in the selector, such as the a
tag, the Universal (*) Selector is assumed. Indiscriminate use of the
:hover pseudo-class can negatively impact page performance.
Still you could force IE to :hover on any elements and manage IE erratic support of :hover. But this is from the past.
This 'buggy' and not clear context invited developers to use javascript to achieve a better cross-browser behavior with jQuery.
Also, i see your doctype is html5. Did you htmlShim you page ?
Related
I'm styling the selected text in my document using the ::selection pseudo class.
div::selection {
color: white;
background-color: red;
}
span {
color:white;
background-color: red;
}
<div>Selected styled.</div>
Selected regular.
<span>Not Selected.</span>
When I select the styled text, the red is very visibly not the same color as regular red. It has a blue-ish overlay. This seems to be some sort of interaction between the default selection styles of the browser and my own styles.
How can I completely remove the browsers styling while keeping my own?
I've tried using user-select: none; in the html style, but that completely overrides all selection.
EDIT: I've just run this is firefox and it's fine, so this appears to be a Chrome specific issue.
EDIT: Here is a screenshot of what I see when selecting:
I'm using Google Chrome Version 74.0.3729.131 on a Mac.
Let's say if we go to Bootstrap's pagination section and moved that sample into our sample page, with no JavaScript whatsoever.
I think the "hover" and get grey background effect, as well as the "click" and grey background effect, is done by something like this, which I add to my page as well:
.pagination li a:focus { background: #fa6 !important }
.pagination li a:hover { background: #fa6 !important }
However, I don't know why when I inspect that <a> element on Google Chrome or Firefox's debugger, I do not see the CSS rule come into view, and also, I do not see the "computed value" of CSS showing a different value -- all it shows is #ffffff for white.
I thought I did see the :hover or :focus being listed in the CSS rules before (and the computed value will change as well in the past). What is happening and can we see that as before?
Bootstrap specifically target a to design it. You have to override the bootstrap by this way-
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover
{
background: #fa6
}
I have a question on accessibility on a postchat survey window which I've worked on.There's a close button on the top right(as an image of X) where I've included visual focus by putting focus pseudo class, now the problem i'm facing is that the close button has white border around it when it is focused and this is happening as expected in chrome, Mozilla but in IE a blue border is coming. Can someone help me how to remove this blue border and bring white in its place?
I'm sharing the code snippet where I've used focus
a.close-link:focus {
outline: 1px dotted white;
}
Though active and focus are to different states but you can try both at same time for your purpose i think
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
following source http://www.w3schools.com/CSS/css_pseudo_classes.asp
a.close-link:focus, a.close-link:active {
outline: 1px dotted white;
}
:FOCUS pseudo-class does work in IE, Instead, I believe your problem is with outline property.
Try this:
IE 9
George Langley wrote in to say that IE 9 apparently doesn't allow you
to remove the dotted outline around links unless you include this meta
tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
((source))
Well i've found out a workaround. For IE9 border comes by default so I've removed border now and the blue outline is no more there!
a.close-link:focus {
outline: 1px dotted white;
}
a.close-link img {
border: none;
}
I have to apply special CSS style to my web component if it's a direct child of <body> element. Here is what I've tried so far:
/* applies even if the component isn't a direct child */
:host(body) {
color: red;
}
/* never applies */
:host(body:host) {
color: red;
}
/* never applies */
:host(body:host > my-component) {
color: red;
}
/* never applies */
:host(body > my-component:host) {
color: red;
}
Browsers: Chrome Stable (32.0.1700.107), Chrome Canary (34.0.1843.3).
I don't think this is currently possible without a parent selector in CSS.
You could do something like this in Chrome 32:
/* #polyfill body > :host h1 */
This works in Chrome 32 because the #polyfill directive adds a document level style that says: body > polymer-foo h1. However, this does not work in Chrome 34 because document level styles are ignored by the Shadow DOM.
Also, :host will now only match the host element itself. If you want to try matching the ancestor you can use :ancestor(). Unfortunately :ancestor(body) > :host h1 will not work. :ancestor(body) gets translated to any node which is a descendant of body so the above snippet would be rewritten as polymer-foo > polymer-foo h1.
It's disappointing that this is not possible today but Shadow DOM styles are still in their infancy and hopefully we'll be able to be more expressive in the future.
For future reference, the work in progress spec on Shadow DOM styling can be found here: http://dev.w3.org/csswg/shadow-styling
Why does the CSS3 pseudo-element selection not change all parts of the highlight? As you can see in this screenshot I have selected part of the page, and parts of the selection are the default bright blue color:
This is the CSS that I'm using, it is at the top of my CSS file:
::selection { background: #3B3B3B; color: #fff; }
::-moz-selection { background: #3B3B3B; color: #fff; }
It seems like the highlight for inputs (text, checkboxes, etc.) and white space does not change. Does anyone know why this is, and is there a way to change it for every part of the page so the highlight color is consistent? I'm using Chrome.
The ::selection pseudo-element doesn't work properly in Chrome/Safari. <input> elements will be the standard highlight color. It's a very old and still outstanding bug:
https://bugs.webkit.org/show_bug.cgi?id=38943
The only workaround I've been able to come up with is using contenteditable elements instead of <input> elements.
Here's a demo I created: http://jsfiddle.net/ThinkingStiff/FcCgA/
And a post I wrote about it: https://stackoverflow.com/a/8529323/918414