Skip to content

Instantly share code, notes, and snippets.

@sofish

sofish/filter-hover.html

Created June 6, 2012 11:24
Show Gist options
  • Save sofish/2881351 to your computer and use it in GitHub Desktop.
Save sofish/2881351 to your computer and use it in GitHub Desktop.
Download ZIP
解决 filter 导致的 :hover 失效 bug
Raw
filter-hover.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<style>
/*
@ 名称: 投影 | drop shadow
@ 用法: 添加 .sl-shadow
@ 实例:
<div class="sl-shadow">
<!-- your context to go -->
</div><!-- .sl-shadow -->
*/
.sl-shadow {
/* modern web browsers */
-moz-box-shadow:1px 3px 12px #bbb;
-webkit-box-shadow:1px 3px 12px #bbb;
box-shadow:1px 3px 12px #bbb;
/* 一定要设置background, 不然 ie 会显示在字体上 */
background: #fff;
/* gte=ie8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Glow(color=#aaaaaa,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)";
/* lte=ie7 */
*filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee, direction=0, strength=7) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd, direction=90, strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd, direction=180, strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee, direction=270, strength=7);
}
.sl-shadow a {
color:#333;
background:#eee;
position:relative;
}
.sl-shadow a:hover {
background:#888;
color:#fff;
}
</style>
</head>
<body>
<div class="sl-shadow" style="width:300px;height:125px;text-align:center;line-height:125px;">
<a href="#">hello whatever</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment