先拿淘宝看这样的例子:
正常状态:
下拉后状态:
淘宝这个三角是用s标签实现的。我一同事试图使用a,a:hover来模拟还原这个效果,同时我也写了个代码如下
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="tofishes@163.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
a span { display:inline-block; border:0 solid #fff; border-width:5px 5px 0; border-color:#090 #fff ;width:0; overflow:hidden;height:0; }
a:hover span { border-width:0 5px 6px; }
</style>
</head>
<body>
<p>
<a href="">右侧有个小三角,鼠标悬浮会改变<span></span></a>
</p>
</body>
</html>
原理很简单,利用0高0宽的元素再配以不同宽度不同色彩的边框实现一个三角形。
这段代码在FF等标准浏览器下是没有问题的,但是在IE6下会发现鼠标悬浮过去没有效果,当鼠标左键按下去时才出现意料中的效果。当时同事问我,我也没试出怎么回事。今天写html时候,心血来潮就又试了一下。结果被偶发现一个解决之道:
只要在定义a:hover span 样式之前加上一个a:hover { border:0;/*或none*/ } ;
神奇的效果出现了,IE6正常了(在未知的时候原谅偶用神奇来描述)。
这两者一下子真是想不出来有啥子关系。。。奇怪的IE,先截止到目前为止吧。
扩展:除了border,貌似background也有此问题。
<!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>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="author" content="tofishes@163.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
a span { display:inline-block; height:30px; background:#ccc;}
a:hover span { background:#f60; }
</style>
</head>
<body>
<p>
<a href=""><span>看看背景会不会变化</span></a>
</p>
</body>
</html>
是的,背景也没有变化,甚至鼠标点下也没有变化。同样解决之道就是定义:
a:hover { background: transparent; }/*为了减少影响使用集成父背景 */
还有没有其他属性呢?值的发掘。