Control CSS States : hover,active

Question

Let's say we have a link with class="myClass1" While through Javascript, we can add control the classes for this link...e.g. we can add myClass2 to the link My question is can we control the states through Javascript e.g. remove hover state to a.myClass1:hover

Just to add, I am facing some issues for the hover state class on the iPad..

Thank you.

Might want to look at http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript — Philip Ramirez, Jul 27 '11 at 11:24

afaf12 · Accepted Answer · 2011-07-27T11:47:18.890

I hope I understood you right. Unfortunately, I have no experience with Ipads. If they "understand" js events like onMouseOver, this could work.

Idea #1:

<a href="index.html" 
onmouseover="Over(this)"
onmouseout ="Out(this)"
onmousedown="Down(this)"
onclick = "Click(this); return true">link</a>

These 4 functions correspond to 4 handlers above.

function Over(Link) // called by onmouseover event
{                      
  Link.className = "Over";
}

function Out(Link) // called by onmouseout event
{                       
  Link.className = "Out";
}

function Down(Link) // called by onmousedown event
{                      
  Link.className = "Down";
}

function Click(Link) // called by onclick event
{                      
  Link.className = "Click";
}

classes in CSS:

a{}
a.Over{}
a.Out{}
a.Down{}
a.Click{}

Idea #2: Just make regular links and links which are hovered look the same.

a.myClass1:link{color: black; text-decoration:none;}
a.myClass1:visited{// something different}
a.myClass1:hover{color: black; text-decoration:none;}
a.myClass1:active{// something different

}

Unfortunately I cannot edit the HTML page and will need something around the CSS or JS file.. — copenndthagen, Jul 27 '11 at 11:37
What about overriding link CSS and making a:hover look the same as a? Will add it in a sec. — afaf12, Jul 27 '11 at 11:41

Control CSS States : hover,active

1 Answers1