I've noticed on a lot of sites recently that the hover state is being achieved on links.
For example there is a bunch of links, you touch one, it turns red, you touch it again and the link works.
I have tried various CSS methods to achieve this but so far no luck.
Can anyone shed any light?
Cheers
Here is an article that talks about the iOS :hover/double tap issue .
That's not a hover event, to me it seems more like a click event. You click, the color changes (or better still, it toggles)
Well, you can try these toggle/switch examples: css toggle
Related
In real need of help here after about 3 to 4 hour of independent searching. I am building a website where it imperative I change the height of a button so iphone/ipad users get the correct style. After searching, people seem to be pointing me to the -webkit-appearance values and I've tried to impliment them with absolutly no luck. I have a codepen (https://codepen.io/osa10928/pen/awrmRG) where this was a problem too so you guys can look at that code and try and solve the problem there and hopefully I can carry yall's implimentation to my other project (I'm not at liberty to share my other projects code)
Looking at the codepen you'll see the buttons #start-button and #strict-button do not change height on iphones (or ipads I presume, I dont't have one to check). I've tried several things like including -webkit-apperance: none on a button tag, on the individual id's in css. I've inlcuded:
input[type=submit], input[type=reset], input[type=button]{
-webkit-appearance:none;
}
all to no avail. Please, could someone show me the proper implimentation of -webkit-appearance: none, or something else that will allow me to change button heights for iphone users?
Update Turning buttons into divs and restyling as buttons has been the best option. If anybody does have a working work around I'd love to hear it. Thanks all!
you can use padding top and bottom instead of height
Hey guys I have problem And I'm sitting all day trying to figure it out...
Problem is that if I click on button (succes, danger, custom) it gets a bit smaller:
When button becomes :active it will do this... and this applies only to btn class...
What could be the problem?
I tried setting active link font-size, but it's just make everything worse...
Just writing my own comments as an answer as this help him to figured out the solution
your css might be messing around with button, on button plz do inspect element and check on active state this way you'll figured it out on your own
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
Hi all I am working on a project and am trying to do this all by hand for a learning exercise. I am not looking for the code that does the job but just an explanation of how this should be done.
the page I am working on is http://dev.davydsoft.com/playing.html
What I would like is to have a dropdown "menu" image when you hover over the pics up top. This is inspired and by the twitter bar. When you click on your user name on the twitter bar you get that dropdown.
I have played with alot of examples and for some reason it just wont click for me.
Any pointers would be great.
welcome to the stack overflow! I would recommend that you take a look at the first tutorial on this page:
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
It explains how to use jquery (javascript) to show and hide hidden html elements.
If you are looking for a css only solution, you might search for "css suckerfish menu".
You need javascript for the hover event css for styling and html
Have a look at: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Basically, if you only want guidance, then start looking into how to style with :hover selectors.
Does anyone know what is causing the sprite rollover to jump around
It is I think more likely a photoshop question, but I am not completely sure.
I hope to get an answer here anyway, since I think most webdesigners/programmers problably worked with photoshop also.
This is what I want the rollover to do example 1
and this is my testpage (see the play button)
I made the sprite with spriteme.com
thanks, Richard
I do not see anything jumping around. However, when I first open the page the Play button is missing (its style is set to display: none;). When I click stop it appears, and then disappears when I click play. This is due to it's inline "display" style being set to block and none.
Is this your problem?
Note: I tested in Chrome and FF. I debugged the CSS states using Firebug.