Search code examples
cssinternet-explorer-8css-selectorspseudo-class

CSS pseudo-classes :focus and :active not working with the ~ combinator in IE8

im so confused with the CSS Pseudo classes :focus or :active,because it works well with :hover in ie8 ,but don't work with :focus or :active. like this:

<!doctype html>
<head>
<style>
#target{ display:block; width:1em; height:1em; background:lightgreen; }
a[href="#target"]:focus~#target{ width:10em; height:10em;  }
</style>
</head>
<body>
<a href="#target">target</a>
<div id="target" ></div>
</body>
</html>

when i use :active to replace :focus,the same problem happened,but :hover works well~ when i use :focus or :active without ~ ,it works well too. that's confused~ TX~

Solution

  • :focus for a tags only happens when you use the tab key to get the link you want. :active for a tags is the equivalent of onmousedown.