1

This is my jsFiddle. It has onHover event which changes the image. It works fine on chrome. But, doesn't work right on firefox. What to do?

This is the jQuery function:

$(document).ready(function(){$('.viewport').mouseenter(function(e) { $(this).children('a').children('span').fadeIn(200); }).mouseleave(function(e) { $(this).children('a').children('span').fadeOut(200); });});

This is how it looks in chrome: enter image description here

And this is how it looks in firefox: enter image description here

Also, i have tried both solutions, with jquery and pure css.

Improve this question
11
  • 1
    A mouseenter even in Javascript has nothing to do with CSS. Commented Dec 21, 2013 at 14:32
  • Works fine on FF 25 and 26. Also, you might want to use hover() instead of those two functions. It's a bit easier to maintain. Commented Dec 21, 2013 at 14:33
  • Works for me too - what is your FF version and can you describe what doesn't work in detail? Commented Dec 21, 2013 at 14:37
  • works for me on FF25, what version are you on and what is the problem? Commented Dec 21, 2013 at 14:39
  • FYI, using hover event in/out handler and fadeToggle() method for mor concise code: jsfiddle.net/xghyz/3 Commented Dec 21, 2013 at 14:39

1 Answer 1

Reset to default
4

Delete all your Javascript and replace with pure CSS:

.viewport a span { opacity:0; transition:opacity 200ms; -webkit-transition:opacity 200ms; } .viewport:hover a span { opacity:1; }

Updated fiddle.

Improve this answer
Sign up to request clarification or add additional context in comments.

13 Comments

Completely disagree. Yes, CSS transitions are nice, no they should not be used without fall-back for important information. Since the information provided inside the span is important, users with older browsers will not be able to see that information. It would be different if a transition does not supply important information and it's mere eye-candy, but that's not the case here.
Erm, if the browser doesn't support transitions, this will just work without the fade. There will be no loss of information. There's a bigger chance someone has disabled Javascript than having a browser that doesn't support :hover behaviours, and without JS it will be broken, hence this solution is more resilient than JS-based. You just might need to patch in a fallback to display for ancient IE-versions that do not support opacity.
Right and wrong. I was not talking about the transition itself, but about the opacity property. Which is not supported by older browsers. At least provide a filter() "fall-back". Here are equivalents: css-tricks.com/snippets/css/cross-browser-opacity
Again, no fallback required. IE8 and older may not support opacity but in that case the element will always be visible as default. Again, no loss of information, a fallback to filter or display is just stylish for ancient browsers, not strictly required.
I realise now that I've been wrong in the logic I was following. (Unfortunately I cannot un-downvote). I just don't understand why you would not even write 4 lines of code more to give a better experience to people that are stuck with IE8 (couldn't care less about 7 though). Now, there is no hover effect/feedback at all on older browsers. Using an opacity equivalent will at least provide the similar experience and give a user feedback on his input - the basics of a good GUI.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.