The CSS :hover doesn't work in IE6 for elements that are not links. Is there a workaround? e.g. how do I apply the :hover to a div?
There's whatever:hover. I've never used it myself but from what I hear, it works well.
Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. Version 3 introduces ajax support, meaning that any html that gets inserted into the document via javascript will also trigger :hover, :active and :focus styles in IE.
You can use the famous IE7.js from Dean Edwards, which has the nice advantage, that you can use the :hover selector in your CSS.
Apart from that, I doubt that you can achieve it with CSS alone. IE can handle JS in CSS files via expression(), but you can't get to an expression to handle hovering without a selector handling hovering, if you catch my drift.
Then, finally, a short jQuery solution:
$(document).ready(function () {
$('div').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
Then you can use this in your stylesheet:
div:hover, div.hover { ... }
If you only need for paticulars div
and you are not using jquery then go
for suckerfis js as #futta
suggested.http://www.htmldog.com/articles/suckerfish/
If you are planning to use Hover on more tags in future and don't want to edit every time js for this the go for Whatever.htc in for IE6. as #Pekka suggested.
Suckerfish vs. .htc
IIIIN the blue corner we have
Suckerfish, the original lightweight,
accessible, cross-browser,
standards-compliant :hover mimic.
IIIIN the red corner we have '.htc' -
the JavaScript files accessed via CSS
to mimic :hover.
Ding ding!
And Suckerfish instantly lands a heavy
blow on .htc's validity - .htc simply
isn't standards compliant CSS.
Oooo... .htc sneaks in a crafty jab
without the need for additional
selectors...
Suckerfish bounces around the ring.
He's much lighter weight than his
opponent.
And OH! The IE 5.0 uppercut! That's
something that .htc just doesn't have
the skill to do, whereas Suckerfish
can work IE 5.0 seamlessly.
.htc is dazed! And the contest is
over! Suckerfish wins on points! TKO!
IF you want to get benefit for other things (other than Hover) also in
IE then go for IE7.js as #Boldewyn suggested
And If you are already using jquery
and want to use hover in a limited
way then go for This way :
How to enable hover on a div for IE6 using jquery in minmal code?
NO pure and valid CSS solution available for this in IE6.
One Non- valid CSS expression solution is available
but i would not not advise to use
this because it's slow
Solution: http://www.visibilityinherit.com/code/ie6-hover-expression.php
suckerfish and it's offspring provde great lightweight alternatives for this purpose too.
Related
I've been working with some basic animations lately and trying to follow good web practices at the same time. The problem I'm encountering is image flicker when not using a preset css method to hide the element before the page loads.
It's very easy to prevent the flicker by just hiding the element with my normal css and then revealing it with javascript, but that seems to me a horrible practice if someone has javascript disabled.
Should I use the HTML5 feature of putting <noscript> tags in the header and then use a separate style sheet to set the opacity and position to the final settings for users without javascript? Is that the most elegant solution?
I've started using the greensock (gsap) library to TweenLite.from, since I can just set everything to the final state in the css, but I get a slight image/text flicker the first time the page is loaded. I like this solution because I can set all of the css as it will be for someone with no javascript, and it allows me to easily animate from a point, to an existing point, instead of working backwards like I have to do with Javascript or jQuery. But, there's still that image flicker which isn't really acceptable. Would a page preloader solve this?
What is the generally agreed upon practice for this these days? I'm also worried about SEO and the consequences of setting stuff to visibility: hidden or display:none and then animating it in. Does the Google spider read javascript?
Here's an example of the screen flicker and animations I'm talking about.
Have a look at HTML5 Boilerplate and Modernizr.
http://html5boilerplate.com/
http://modernizr.com/
It ships with a smart solution to see if a client has JavaScript enabled in CSS.
By default a class no-js is applied to HTML tag and it is then replaced by js by Modernizr. That way you can qualify your CSS selectors accordingly.
Example CSS:
.no-js .foo { }
.js .foo { }
This should execute fast enough that clients with enabled JavaScript don't see the no-js styles.
References:
What is the purpose of the HTML "no-js" class?
https://github.com/Modernizr/Modernizr/blob/master/src/setClasses.js#L9
Is there a way to automatically replace all or certain CSS :hover effects with a smooth hover from jQuery (or plain JavaScript or other library would also be OK)?
E.g. if for an element a :hover style is defined, to replace this without having to manually write the JavaScript for each?
I feel that this approach goes backward in terms of web progression. It's good practice to keep presentation separate from scripting. The same goes for markup: In a perfect world they should all be disparate in implementation.
Having said that, you may be able to accomplish what you need using CSS3 transitions, though they're not supported in most older browsers. See here: https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions?redirectlocale=en-US&redirectslug=CSS%2FCSS_transitions
Otherwise with jQuery:
$('element').hover(function () {
$(this).css({
// styles in JSON
});
});
I'm working on a site where I've created a simple CSS3 hover effect, where if a link is hovered, it changes the opacity and looks like a rollover effect. It seems to be working perfectly on all browsers (even older ones, such as Firefox 2). Just wanted some input if this is a problem and I should consider javascript instead? Or is using CSS a good (semantically correct) way of going about a rollover?
Generally, if an effect can be achieved using CSS alone, it's usually better to use CSS then to use JavaScript to achieve it.
Sure, you can use JavaScript and/or libraries like jQuery, but why? If the browser is capable of doing it natively, not only will it work better, it will look better and smoother.
Generally, people using newer browsers get benefits from the new technology.
People who do not update their systems tend to not care about how things look, so as long as the site is functional and the effect is not very important, I'd say don't bother to make all browsers behave exactly the same. It's a waste of time and effort.
For anchor elements, the :hover pseudo-class is widely supported, and is a good way to go. I believe the only in-use browser that doesn't support it is IE 6. The opacity property is less widely supported, so your effect may not look the way you want in some browsers. If you need to use the :hover pseudoclass on elements other than a, I think you'll lose IE 7 as well.
See http://www.w3schools.com/css/css_pseudo_classes.asp for some background information on :hover and other pseudo-classes.
update-
sorry folks, i should have provided the link to the website where i saw the effect. here you go - http://www.w3schools.com/Css/css_image_transparency.asp
and the code that i saw there (and the basis of this question) is as below -
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
The original question is as below -
I was looking for rollover effects that can be done without using JS, and i stumbled upon the w3schools website teaching the opacity setting for images. In the code, there is no js involved, its just pure css.
i even tried using the same code into my webpage (which does not have any js, yet) and i noticed that the code happened to work perfectly in both chrome and IE 7.0. the code has a "onmouseover" event and another "onmouseout" event to give the hover effects based on the opacity settings.
wondering whether these effects (onmouseover and onmouseout) are -
1. pure css
2. standards compliant (xhtml 1+ and css2)
3. whether there are any hacks involved
i still cant believe these things worked on ie7, and wondering why there are no documentation on these events.
There's no such "onmouseover" event or attribute in CSS, that's JavaScript. CSS uses the ":hover" pseudo-class for mouse over events. A quick example,
HTML:
<div id="someid">I'm a random div.</div>
CSS:
#someid {
background: #fff;
}
#someid:hover {
background: #000;
}
In this example, when you hover over the #someid element, it's background will change from white to black.
This is the correct way to handle mouse over events in CSS. It is standards compliant and will work in all modern browsers (and some older browsers too).
Sidenote: It won't always work in IE6, IE6 only recognizes the ":hover" pseudo-class when it's applied to anchor tags ("a:hover", etc).
Based on the update to your question:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
That is using JavaScript to change the style. The only bit of this which is CSS is the style='...' part. The text in onmouseover and onmouseout is JavaScript.
To do what you want in pure CSS, it should be like this,
<html>
<head>
<style>
img.opacity-image {
opacity: 0.4;
filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
}
img.opacity-image:hover {
opacity: 1;
filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
}
</style>
</head>
<body>
...
<img src="klematis.jpg" class="opacity-image" />
....
</body>
</html>
opacity is CSS3 and only supported by modern browsers (IE6,7,8 don't support it). You can use filter:... to get opacity to work in IE (although it won't handle PNGs correctly, but since you're using JPG that's not an issue), but then your code isn't technically standards compliant as "filter" is not in the CSS standard. That doesn't generally matter too much though since it'll still render correctly in any modern browser.
I'm assuming you're talking about the :hover event?
<div id="hoverDiv"> Something should happen when you hover on me</div>
Style:
#hoverDiv:hover{ background-color:red; }
Visual example: http://jsfiddle.net/zRnug/
All hover effects you want to add to your stylesheet within the #selector:hover{ } area.
All effects you want to pertain before (the default style of the element), just use within the #selector{ } area.
Those are Javascript inline event handlers.
You can do this in pure CSS using the :hover selector.
CSS supports the :hover selector, which is triggered when you move the mouse over the item.
.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}
Any CSS property can be set to change on mouse-over using the :hover selector in this way.
Opacity is a CSS3 feature. It is supported by most browsers, but IE8 and lower don't support it. They do have an alternative way of doing it (using the IE-specific filter property); it's more fiddly than standard CSS and harder to get right, but it can be done.
Be aware that IE6 and lower only supports :hover on <a> elements. Other browsers (including IE7 and up) support it for all elements. My advice would be just not to support IE6 on your site, but if you do need to, there are hacks for it which can make :hover work correctly.
I see a flash website with some eyecathing buttons with flash effect which I want to have with jQuery if possible here is the link of website -> http://www.goodthinking.com.ph/ .. any tips or sample if can this possible done using jquery code.. . thanks in advance.. .
Yes you could build something close, but with less browser support. The puzzle pieces could be stored as background images on <div/> elements, then the divs could be positioned to "fit" as puzzle pieces, yet still be move-able by animating their position properties with a custom jQuery $.animate({}). The noise could be played on :hover with an <audio/> element in browsers that support it, and the flip effect could be achieved using a 3D transform, typically done by adding and removing CSS classes that define webkit animation keyframes.
You should seriously consider, however whether a whizz-bang effect actually helps people find the content on the website, or gets in the way. If you do want the effect and can design it in such a way that it degrades in browsers that don't support the effect, or all of the effects, then you have a cross-browser solution that is not the same everywhere, but doesn't penalize all users either by requiring they have a browser plugin.
Is it possible? Probably yes.
Would I recommend doing it with jQuery or javascript? No.