Hover State in iOS

I created a submenu that appears using the hover state. Works great with Windows Chrome & IE, and Android Chrome. It does not work on iOS for Chrome or Safari.
I even made a simple test with one div to make sure there too much going on in the code. It just does not respond on iOS.
I'm not sure if this is something that is already being addressed.

I'm not sure that a hover state is gonna work on a mobile touch browser the same way it works on desktop. Since you need to have a constant cursor on desktop, and it does not really work the same for touch devices.
But, we don't yet have things like click for buttons, since it would require javascript to execute the state or css change. Reflow only uses html and css at the moment.
We are continually looking into what users want to use Reflow for, and if this is of interest, please let us know!

Similar Messages

How do I add a hover state to a smart shape button on the master slide? CP7

I want to use a button with a hover state on my master slide in CP7. I created a smart shape and checked the box 'use as button.' I then created 3 image files with the "x_up, x_down, x_over' extensions. When I select my smart shape and choose a custom pattern from the fill menu and select my 'x_up' image file, the smart shape does not recognize the hover state. Is there another way to achieve this?
Thanks!

Thanks I think I get it now after reading your post. Shape buttons can only shrink when they are pressed and nothing else. I was thinking a work round for me would be to use a regular button with the up, over, down state, put this regular button on the first slide and set the timing for 'display for rest of project.' However I don't see this option in the timing panel:
Is this option somewhere else?
Thx!

How to change hover state on spry menu dropdowns?

I've spent 4 hours making changes to the style sheet. I cannot figure out how to make the drop-down menu background change when you mouseover. The text color changes, but the background doesn't. I keep making changes to the stylesheet, and sometimes I see no difference.
Also... trying to change the font color on the main menu text. Style sheet LOOKS right, but doesn't display any change.
ALSO, my border is wider than the submenus. They are both set to 15ems. Maybe I don't understand ems??? I appreciate all your help out there! Sorry for not taking out all comments from code...
http://duenorthdesign.com/pcm/index2.html
ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 748px; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are a fixed width */ ul.MenuBarHorizontal li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; float: left; } /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarHorizontal ul { margin: 0; padding: 0; list-style-type: none; font-size: 100%; z-index: 1020; cursor: default; width: 15em; position: absolute; left: -1000em; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 15em; font-size: 12px; background-color: #C2CA9A; color: rgba(0,0,0,1); } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal ul ul { position: absolute; margin: -5% 0 0 95%; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #61270e; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { display: block; cursor: pointer; background: 61270e; padding: 0.5em 0.75em; color: ffffff; text-decoration: none; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus { color: #61270e; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible { background: transparent; color: #61270e; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenu { background-image: url(../images/bkd_navtop.jpg); background-repeat: repeat-x; color: rgba(255,255,255,1); font-family: "Yanone Kaffeesatz", Verdana, Geneva, sans-serif; width: 149px; font-size: 23px; } /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; }

The good news is, Spry components generate their own CSs files so you know where to start when customizing. From there you can either go into the CSS file itself, or use the CSS styles panel in Dreamweaver.
if you're looking within the CSS file, you first need to find the block the styles the particular element you want to change, and tweak the values. However, if any of the attributes are inheriting their states from a parent rule, then you need to add that attribute to override the parent setting. So that means making sure you're using the right attribute and getting the syntax right.
If you use the CSS panel, select all, find you way to the correct style sheet, expand it and find the rule you need to change. You can set these parameters in the area underneath, or just double click the rule in the upper tree and display the CSS rules dialog. This is my favorite as it displays exactly what is contained in the style sheet in visual form. You can change values easily and add new attributes knowing that it will write the correct syntax. This should make it very easy to add hover states for the background and text, dimensions for the submenus and borders. For sizes and borders, I prefer pixels, but you can also add borders per side of the containing box - it doesn't have to be the same border all the way around.

How to maintain the hover state of a button while it is in it's current page?

Hi,
I'm just a beginner in actionscript 3. I have this code about navigation using movieclip buttons. I just made the currently selected button disabled when it is in the current page but I just cant figure out on how to maintain it in its hover state (It keeps on returning to its normal state). Any ideas, your help will be very much appreciated. Thanks.
Here's the code I've written on the first frame on the main timeline(scene1), I have 4 buttons namely mcButton1, mcButton2, mcButton3, mcButton4 and 4 labeled frames, page1, page2, page3 and page4.:
var page:String;
var btnArray:Array = [mcButton1, mcButton2, mcButton3, mcButton4];
var pageArray:Array = ["page1", "page2", "page3", "page4"];
for (var i:int = 0; i < btnArray.length; i++) {
    btnArray[i].buttonMode = true;
    btnArray[i].addEventListener(MouseEvent.CLICK, onMouseClick);
    btnArray[i].addEventListener(MouseEvent.ROLL_OUT, onMouseOut);
    btnArray[i].addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
function onMouseClick(event:MouseEvent):void {
    for (var i:int = 0; i < btnArray.length; i++) {
        if (event.currentTarget == btnArray[i]) {
            btnArray[i].mouseEnabled = false;
            page=pageArray[i];
            play();
        else {
            btnArray[i].mouseEnabled = true;
function onMouseOut(event:MouseEvent){
        event.currentTarget.gotoAndPlay("out");
function onMouseOver(event:MouseEvent){
        event.currentTarget.gotoAndPlay("over");

use:
var lastClickedButton:MovieClip;
var page:String;
var btnArray:Array = [mcButton1, mcButton2, mcButton3, mcButton4];
var pageArray:Array = ["page1", "page2", "page3", "page4"];
for (var i:int = 0; i < btnArray.length; i++) {
    btnArray[i].buttonMode = true;
    btnArray[i].addEventListener(MouseEvent.CLICK, onMouseClick);
    btnArray[i].addEventListener(MouseEvent.ROLL_OUT, onMouseOut);
    btnArray[i].addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
function onMouseClick(event:MouseEvent):void {
    for (var i:int = 0; i < btnArray.length; i++) {
        if (event.currentTarget == btnArray[i]) {
            //btnArray[i].mouseEnabled = false;
lastClickedButton.gotoAndPlay("out");
lastClickedButton=MovieClip(event.currentTarget);
            page=pageArray[i];
            play();
        else {
            btnArray[i].mouseEnabled = true;
function onMouseOut(event:MouseEvent){
if(lastClickedButton!=event.currentTarget){
        event.currentTarget.gotoAndPlay("out");
function onMouseOver(event:MouseEvent){
        event.currentTarget.gotoAndPlay("over");

Hovering over links doesn't always show hover state?

After installing Firefox 7, I noticed something weird. I'm a front-end web developer, so I noticed this recently when creating custom tool-tips that appear on hover. I noticed that the hover tooltip wouldn't appear for certain links, and at first I thought I was doing something wrong on my end, but then I realized that this was happening on almost all websites.
Here's what's happening: on ''some'' links, not all, the hover state only gets activated on certain parts of the link. [http://i.imgur.com/P60He.png Here is a screenshot] -- it's from the Firefox help forum. Hover over the green portion activates the hover state (underlining the top link), but the red portion does nothing. Some of the links work throughout, but some don't. The same goes with Google search results.
I'm running OS X Lion.
I'm wondering if it's just me or a Firefox 7 bug, can someone help/confirm?

I am having this issue as well. I am also running OS/X Lion and when the issue crops up, it is not limited to Firefox, it extends across all browsers... I have tested on Opera, Firefox, Safari, and Chrome... it happens in all of them. I believe this to be a Lion specific issue, not just Firefox.

Hover state to work in IE8

I cannot get the hover state to work on <p>
I have assigned a hover state to the paragraph tag.
It works fine in FireFox but I can not get the hover state to work in Internet Explorer 8.
The reason that I gave it a hover state is because it is linked in XML and I want it to look like a Hyperlink when you mouse over it.
Thanks,
Travis
CSS:
#Wrapper   #Top   #LeftColumn   #LeftContent p {
    text-indent: 35px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    color: #777;
    background-image: url(/images/LeftLinksGrayDot.gif);
    background-repeat: no-repeat;
    background-position: 20px 0.4em;
    height: 20px;
    text-align: left;
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
#Wrapper #Top #LeftColumn #LeftContent p:hover {
    color: #0000FF;
    background-image: url(/images/LeftLinksBlueDot.gif);
    background-repeat: no-repeat;
    background-position: 20px .4em;

AFAIK IE only Hovers on <a> tags.
jQuery to the rescue
http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS menu hover state

Hi, I'm trying to get to grips with CSS and would like to
create a menu system that in hover state shows different copy for
each menu link.
So far I've managed to achieve this by linking an image to
the a:hover state but I need the copy to be different for each menu
item and I'd like to make it vector text not image.
Can this be done?
My attempt so far;
http://www.ad-one.co.uk/test/index4.htm
Thanks
Chris

Check out this page
http://www.divahtml.com/products/divaGPS/current_menu_location.php
Tun Tun bags of fun skrev:
> Hi, I'm trying to get to grips with CSS and would like
to create a menu system
> that in hover state shows different copy for each menu
link.
>
> So far I've managed to achieve this by linking an image
to the a:hover state
> but I need the copy to be different for each menu item
and I'd like to make it
> vector text not image.
>
> Can this be done?
>
> My attempt so far;
>
http://www.ad-one.co.uk/test/index4.htm
>
> Thanks
>
> Chris
>
>
Kim
http://www.geekministry.com

How do you create Text Hover States - inDesign cs5 table of contents?

I cannot figure out how to create text hover states in the table of contents. I want it to act like a hyperlink on websites where you hover over a link and it changes color. Any ideas?

Hello,
This forum is for questions about Adobe FormsCentral (http://formscentral.adobe.com). Please re-post your question to the InDesign forum:
http://forums.adobe.com/community/indesign
Best of luck!
Rebecca

MBP = no "hover" states for mouse input

My friend is having an odd occurrence with his MBP.
As of yesterday, I think, he has no 'hover' states with his mouse pointer.
So as an example, in Safari, you can click on the menu "Safari" at the top, then there's a sub-menu, "Services". If I hold my mouse pointer over that word, Services, then a new menu flies out. Like it would for most Macs in the world. My friend does this and there is no sub-menu revealed. But it's not just Safari: any apps with sub-menus off of their main menus won't expose themselves.
Same thing, in a webpage. When he hovers over links the pointer would typically become a hand, to demonstrate that a particular item is a link, clickable. This does not happen. He can, of course, click on links but he has no idea if items are links are not because there's no real mouse input saying so.
This is pretty odd, I know. I've done a Google search for some guidance. Didn't really turn much up.
Yesterday, a single reboot fixed it. Today, 5 reboots have NOT fixed it for him. I doubt anything has changed on his system this week. We basically build 'em up - and lock 'em down. All the Macs, at this studio, are considered production machines: i.e. we rarely alter them once they're stable. So new software installs are NOT the culprit here.
Hopefully there's some help for this problem. FWIW, he's running 10.5.8.

Problem solved. The issue was the mouse. He uses a multi-button Logitech MX600. One of the side- buttons was sticking and causing this anomaly. Once cleaned out - everything is again functioning as it should.

Is there a way to create a rollover on top of a hover state?

I'm trying to do a hover action on top of another hover. Is there a way to do this?
Thanks!

An example would be Angularjs Admin
click collapse menu icon, then hover over an square icon and then hover over a menu item. I'm trying to do a hover on top of a hover like this.

I'd like to use an animated gif as a hover state to a static logo

Does anyone know if this is possible, and if so, how do I do it?

I am trying to animate a rocket taking off. Here is the test page I am working on. You will see 3 rockets.
The one on the left has a rollover state with the animation playing once but then it will not play again when you rollover it.
The middle rocket has a rollover state as a looping gif. Not the desired effect.
The one on the right is just a static version.
http://rockettestgt.businesscatalyst.com/index.html

Applications in waiting state after iOS 5 update

At least 10 of my applications are sitting there saying 'Waiting'. I have done the complete upgrade process, waited for it to update apps etc. I have even run the updates from the AppStore on the phone.
Can anyone advise on what to do - I can't use these apps because they are non responsive whilst in the 'Waiting' state.

Mine did that as well, so I finally unplugged from computer. Then plugged back in and iTunes said it had discovered an iPhone in recovery mode did I want to restore from backup. I of course chose yes and it restored then updated right to iOS5. Hope it works for you like it did me.

Non-rectangle hit/hover states?

Hey guys,
I'm creating an interactive map, similar to the Mobile Marketplace example: http://html.adobe.com/edge/animate/showcase/mobilebrowser/mobile_marketshare.html
In that example, they've just used (skewed) divs as the "buttons" for the continents.
My map will have a lot more detail and I'll need "buttons" that have more than 4 points. Is there any way to do this in Edge?
Only alternative I can think of is using Image Map polygons but I don't think this is supported in Edge.
Thanks in advance, Mark.

I had a similar sort of problem and opted to create the map using raphael.js (http://raphaeljs.com). First I drew the map in Illustrator, then saved as svg (make sure you name each of the layers in your map that you want to use as buttons becuase it will be difficult to identify them once they're converted to svg). You then need to convert the svg to javascript objects and depending on the complexity you may either want to do this manually or using an svg to raphael converter - there is a good one at at http://www.readysetraphael.com. Once you have the javascript objects you can draw these into the DOM using raphael.js, apply mouseover/click events to individual elements, etc. Have a look at the following jsfiddle for an example: http://jsfiddle.net/allankiezel/FJrNN/
You can open the html page that contains this in Edge, and manipulate the div that contains your svg, but unfortunately Edge itself isn't able to select the DOM elements within it. I'd love it if this was to be implemented at some point. Any chance of seeing this in the future?

Is there a way to export different button states from Photoshop to Edge Reflow? (eg., normal, hover, hit)

Is there a special naming convention I can use for layers to have the Photoshop to Edge export tool automatically recognize a button with various states? Rather than have static images, is it possible to have normal, hit, and hover states?
Thanks.

No, there's not a way to do this from Photoshop.
VIc

On state while hover

Hello,
I would like to know how or if I can create a hover state
button that will stay in it's hover state while hovering on it's
sub navigation links.
Please see this
link. what I want is that when hovering the sub categories
links, the top main button will STAY in it's hovering color (i.e
brown).
thanks
Mic

migo33 wrote:
> Hello,
>
> I would like to know how or if I can create a hover
state button that will
> stay in it's hover state while hovering on it's sub
navigation links.
>
http://dalmadesigninc.com/rain/Index.html.
what I want is that when hovering
> the sub categories links, the top main button will STAY
in it's hovering color
> (i.e brown).
Make both the normal and over states the same color.
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/

Hover State in iOS

Similar Messages

Maybe you are looking for