Button Changing Colour

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Dingus

Thread Starter
Joined
Apr 21, 2002
Messages
1,161
I’ve made a button on my site for an email link. On a PC it works as it should. It changes colour when the mouse is hovered over it, then reverts when the mouse is moved away, but on an iPhone or similar the colour doesn’t revert.
Does anyone know of a fix?
 
Joined
Sep 5, 2007
Messages
2,310
First Name
Colin
What is your CSS code? With it we may be able to give you some clues.
 

Dingus

Thread Starter
Joined
Apr 21, 2002
Messages
1,161
The hover css:
.button:hover {
background-color: #FF0000;
color: #BCB9B9;
cursor: pointer;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
and the button itself:
.button {
width: 440px;
margin-top: 12px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
text-align: center;
vertical-align: middle;
border-radius: 80px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 6px;
border: 1px solid #FFFFFF;
transition: all 0.83s linear;
}
 
Joined
Sep 5, 2007
Messages
2,310
First Name
Colin
Nothing looks wrong with your CSS.

A Google search turned up this article which covers the problem and it is an issue with all touch screen devices
 

Dingus

Thread Starter
Joined
Apr 21, 2002
Messages
1,161
I think this guy has nailed it by the sounds of it. Now to see if I can impliment it. Being a novice !!!!

var isTouch = !!("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0;

if( !isTouch ){
// add class which defines hover behavior
}
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Members online

Top