If I use a class for a normal div, can I write the css like:
.messagebc:hover {
...
}
Is it legal?
It's ineffiecient to use :hover on non-link elements.
Avoid the :hover pseudo-selector for non-link elements for IE clients.
If you use :hover on non-anchor
elements, test the page in IE7 and IE8
to be sure your page is usable. If
you find that :hover is causing
performance issues, consider
conditionally using a JavaScript
onmouseover event handler for IE
clients.
:hover pseudo-selector to non-link elements is a very ineffiecient selector (e.g):
For example:
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
The :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases*. When a strict doctype is not used, IE7 and IE8 will ignore :hover on any element other than anchors. When a strict doctype is used, :hover on non-anchors may cause performance degradation.
More info on un-effiecient selectors
why havn't you simply tried it? yes, you can (in all modern browsers, the IE6 knows :hover only on a, if i remember right).
Yes you can use :hover for all elements in modern browsers (IE7+).
While IE6 support :hover only for <a> elements, you should write you html and css so, that you won't need to use js-patches (for example, in list-menus just use <li>Link</li>, not <a><li><a> and assign :hover to the link element. This should do the trick.)
Yes, however in IE6 you can set :hover only on ANCHOR elements.
Only ie6 does not support it on elements other than <a>, but that can be fixed with a simple javascript: ie7.js
The share of the ie6 is 5.55% and is
decreasing everyday
So You may use it
Wikipedia ie6
Every current browser will support it. If you need it to work in an older browser such as IE6 then take a look at #Willem's link.
If by the term class you mean HTML element then yes per W3C spec you can use the :hover selector on all elements. Whether you should or not is a different question.
Sources:
http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3.org/2009/cheatsheet/#search,%3Ahover
Related
I just read this code somewhere.
*html #menu ul{margin: 0px 0px 0px 40px;width:960px;}
I know * means the selector means any element in css.
But is this needed here? Since it works totally the same without it.Or is it some kind of CSS hacks in specific browsers ?
It is a CSS hack targeted at Internet Explorer 6 and below. More modern browsers should ignore any of the styles applied using *html.
List of browsers which will apply the styles
IE4-6/Win
IE4-5/Mac
IE7+, when in backwards compatibility mode (aka quirks mode)
List of browsers which will ignore the styles
IE7+, when in Standards Compatibility mode
Firefox
NS6.0-7.2
NS4.x
Opera 5+ (I don't know about versions 1 through 4.)
Safari
Konqueror 3
iCab 3
Source: * html ("Star HTML") CSS Hack
So, provided your document is valid then IE7+ should display the page in standards mode and will ignore the styles. If the page is being displayed in 'quirks mode' then the styles will be applied in IE7+.
The Star Selector Hack
The star selector hack, also known as the star-HTML hack and the Tan hack, because it was first described in detail by Edwardson Tan, is the most widely used filter; it relies on a peculiar behavior in Internet Explorer 5.5 and 6. Even though it’s often labeled a hack, I’ve included it in this section on filters because, despite the fact that it exploits a browser bug, it uses a valid CSS selector. The selector, however, should never match any elements; all browsers, except Internet Explorer 5.5 and 6, understand this fact and ignore the rule.
The technique is simply to apply a descendant selector that makes use of the universal selector. The universal selector is, of course, valid CSS, so don’t be confused and start thinking that using the universal selector is bad news. The most common form of the technique (and the origin of its name) is to compose a rule with the * html selector. This constitutes valid CSS, but it shouldn’t match any elements. The selector should apply the rule to any html element that’s the descendant of any other element and, as html is the root element, it’s never a descendant of any other element.
However, while most other browsers ignore it, Internet Explorer 5.5 and 6 will interpret this selector as if there was no universal selector, like the rule below:
html {
⋮ declarations
}
Thus, the star selector hack is a safe way of applying CSS rules to Internet Explorer 5.5 and 6 without affecting other browsers.
You’d use it like this:
.test {
position: fixed;
}
* html .test{
position: absolute;
}
Only Internet Explorer 6 and earlier versions will apply the latter rule; other browsers will ignore it.
Source : http://reference.sitepoint.com/css/workaroundsfilters#workaroundsfilters__sect_starhtmlselector
i cant seem to make the :hover pseudo selector work on a Select element in IE 7, 8 and 9 even though the documentation that i have found says that IE7+ supports it.
According to this it should be full supported in IE7+:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#pseudoclasses
Quirksmode says "almost" http://www.quirksmode.org/css/contents.html
I have tried using a strict doc type but there is no difference.
Do anybody know a way to make the :hover selector work for the Select element in CSS?
I am just trying to change the border color on :hover, but setting the border doesn't even seem to be supported in IE7. It is supported in IE8+ but :hover is not it seems. Changing the color of the text doesn't even work.
Here is an example (works perfect in both Chrome and FF): http://jsfiddle.net/6VrfW/5/
You can wrap the <select> in a <div> and attach the hover to the div. It's awful, but so is IE.
Is there a trick to giving disabled (read-only) select elements a css style?
I tried
select[disabled] {color:#F00 !important}
(or variants using a class, !important etc) but that doesn't work in Chrome and IE. It does work in Firefox, but I'm looking for a universal solution.
Try input[disabled="disabled"]... it might be buggy http://reference.sitepoint.com/css/attributeselector
You could also just add a class to the disabled selector
I'm dissecting this very beautiful example of how CSS can help you create nice glow effects on images.
http://jsfiddle.net/necolas/KbNq7/
This particular line from the example mentions:
Although this method will only produce the full effect in Firefox 4,
other browsers will eventually catch up and apply transitions to
pseudo-elements.
What is a pseudo-element?
Pseudo-elements are CSS selectors that manipulate parts of an element in a special way.
They include:
:first-line
:before
:after
Application
Pseudo elements are applied like so
p:first-letter{
color:black;
font-style:italic;
}
Note: the : followed by the selector is how pseudo elements are denoted in CSS1 and CSS2. In CSS3, the double colon is used (::) to distinguish them from pseudo-classes.
More details here: http://reference.sitepoint.com/css/pseudoelements
Support
Support is decent for a number of browsers, with older versions of IE notably poor with support. QuirksMode has a compatibility table (a bit out-of-date but still useful): http://www.quirksmode.org/css/contents.html#t15
Cool Tricks
Pseudo elements can do some cool things, including
show the URLs of links in printed docs
fake a float:center;
See more here: http://css-tricks.com/9516-pseudo-element-roundup/
With jQuery
jQuery has a number of unique selectors that enhance and expand on the native CSS group:
http://api.jquery.com/category/selectors/
Note: you can use jQuery to force older browsers to adopt certain rules. For example, IE6 will ignore :last-child. Using jQuery can force IE6 to apply that style.
The Spec
http://www.w3.org/TR/CSS2/selector.html#pseudo-element-selectors
Its not an element in the dom. Its something you can select with a selector, notably after a :.
http://www.htmldog.com/guides/cssadvanced/pseudoelements/
Does :hover in css only works on <a> tags? Or it can work on any HTML tags? Thank you.
It applies to any element, but IE6 and earlier have a bug which only lets it work on links (<a> elements with an href attribute).
Quirksmode has the answer!.
The summary: IE6 only supports :hover on links. Everyone else supports them everywhere.