Home/ Questions/Q 9134255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:37:41+00:00

Some idea to render this correctly on IE???? The :active only goes if I

  • 0

Some idea to render this correctly on IE????
The :active only goes if I click out of span area.
I would like to do this without to use javascript.
On chrome and firefox it runs perfectly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
a
{
    padding:20px;
    border:1px;
    display:block;
}

a span
{
    width:96px;
    height:96px;
    display:block;
    border:1px solid;
}

a:hover
{
    background-color:#ccc;
}

a:active
{
    background-color:#666;
}

</style>
</head>

<body>
<a href="#">    
    <span>casa</span>
</a>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can fix this using a pseudo-element for the a-element which is positioned right on top of it:

    a {
  position: relative;
}
a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

    The drawback is that you can’t select any text inside the a-element.

    Pseudo-elements are supported by IE8+. A workaround for IE7 would require CSS-Expressions, but as you don’t want to use Javascript …

    • 0