• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 785
  • Last Modified:

CSS3 and jQuery: hover and 'mouseout' colours for iPhone

As attached is self explanatory.

a.png is a screen grab of Chrome.
b.png is a screen grab of iPhone.

You can see CSS3 hover on Chrome. A cyan colour will darken on ease in effect when clicking the accordion and a darker colour will ease out to lighter cyan after one second. On 'mouseout' event a darker colour will appear when closing the accordion and ease out to lighter cyan colour.

It works to certain extend on iPhone, a cyan colour will darken on ease in effect when clicking the accordion and a darker colour stays that way when the accordion opens and closes. It still stay dark cyan when the accordion closed until I click another accordion.

How can I make a darker colour will ease out when it is 'mouseout' to lighter cyan colour for iPhone? There must be JS that can give a push to make it work on what you see on Chrome.

I use jQuery 1.7

The accordion styling is CSS3 and I  use all CSS3 for colouring effect so far.

This CSS3 code as below of what I'm taking about as above:
.toogle_wrap{background-color:#e4f6f8; border:1px #bfeaf0 solid; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.toogle_wrap:hover {background-color:#bfeaf0; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */

Open in new window


Here is a full CSS3 code on accordion:
.toogle_wrap{background-color:#e4f6f8; border:1px #bfeaf0 solid; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.toogle_wrap:hover {background-color:#bfeaf0; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */
.toogle_wrap:focus {background-color:#e4f6f8; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */

/*.toogle_wrap:a:focus:hover { background-color:#e4f6f8; } *//*  #48c4d2; */
.toogle_wrap_intro{background-color:#fff; border:1px #bfeaf0 solid;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.trigger{padding:0px;margin:0; background:url(../images/toggle_small.svg) no-repeat right; background-position:100% -20px; } /* background:url(../images/toggle.png) */
.trigger a{color: #636363;text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-family:opensans;font-weight:normal; } /* 8a50c1 medium purple */
span.trig{color:#003f5e; font-size:16px;font-family:opensansbold;font-weight:bold;}  /* Change font size to 16 from 18px */
span.bold{color:#cb088c; font-size:12px;font-family:opensansbold;font-weight:bold;}  /* content text bold. Change from navy #003f5e; to magenta for impact and visibility. */
.active {background-position:100% 0px; }
.trigger a:hover, .trigger a:hover:focus{color:#000;}    /* background-color:#eb088c; color:#48c4d2; */
/*.trigger:hover { background-color:#a5cd4e; }
.trigger:hover a, .trigger:hover a:focus{ color:#48c4d2; } */
.toggle_container{overflow: hidden;padding:15px 0 0 0;clear: both;}

Open in new window

a.png
b.png
0
Redscrapbook
Asked:
Redscrapbook
  • 4
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
iphone doesn't have mouse hovers, you can't hover over something on a touch device. it has touch events: touchstart, touchend, etc..

So you have to do this differently. You can still use CSS3 transitions, but you have to apply classes "ontouch", so to speak. you'll need javascript, or you can try to make it work with the :target pseudo class. (:target is minimally supported on other browsers).
0
 
RedscrapbookAuthor Commented:
Thank you for your reply. Can you point out a right JS for this please? Look Like it is lacking JS that may be the cause.

It worked on iPhone by clicking / touch the accordion 'open' with ease effect: light to dark cyan. But it stays dark instead of dark to light ease effect after opening.

Alternative solution: I'll be happy even if its stays dark when it is opened instead of dark to light ease effect after opening as you can see on Chrome. BUT, it has to return to light cyan when the accordion is closed. What I have it stayed dark cyan.

I've come across this: http://jsfiddle.net/gilly3/NPNFg/3/
or http://jsfiddle.net/gilly3/c9BvU/6/
But nearly there?


http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/
and view the demo as below, of what I'm trying to aim for iPhone. With Yellow colour disappears after a second or so. That is what I'm trying to achieve with the original question.

http://webdesignernotebook.com/examples/target.html
0
 
RedscrapbookAuthor Commented:
CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.
http://www.richardet-design.com/wp/design/webdesign/css3-animation-vs-jquery-animation/
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kyle HamiltonData ScientistCommented:
that's not entirely true. 3d transforms use the native hardware acceleration which is much faster.
0
 
RedscrapbookAuthor Commented:
I've looked at the article again and it is written on 14 june 2011. Perhaps that was before jQuery became a big demand?

I see this:
http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers

with possible solution but it needs work?
$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Open in new window



or this most recent (7 months ago):
http://stackoverflow.com/questions/8970280/how-to-simulate-hover-effect-on-touch-devices

$('#arm').bind('touchstart', function() {
        $(this).removeAttr('style').css('bottom','244px');
        $(this).addClass('hover_effect');
});

$('#arm').bind('touchend', function() {
        $(this).removeClass('hover_effect');
});

Open in new window

0
 
RedscrapbookAuthor Commented:
This is a better solution after a long search, trial and error. Thank you kozaiwaniec. I'll try to simplify the questions if I post another relevant questions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now