先拿淘宝看这样的例子：
正常状态：
下拉后状态：
淘宝这个三角是用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; }/*为了减少影响使用集成父背景 */
还有没有其他属性呢？值的发掘。
- 大小: 935 Bytes
- 大小: 1.8 KB
分享到：
相关推荐
### CSS制作带箭头的CSS边框 #### 知识点概述 本示例通过纯CSS技术实现了一个带有箭头的边框效果，无需使用任何背景图片，这为网页设计提供了一种轻量级且易于维护的方法。此方法主要利用了CSS中的伪元素以及边框...
这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的三角形的示例，这对于构建诸如下拉菜单、提示箭头等交互元素时非常有用。 首先，我们要理解CSS是如何生成三角形的。由于CSS无法直接画出几何...
边框交界处呈现平滑的斜线，利用此特点，通过设置各边框宽度和颜色可以得到小三角等。 div元素是块级元素，显示为块框，可以利用它来具体实现。 <div class=triangle></div> <div class=arrow></div> **例1、**一般...
在CSS3中，创建空心三角箭头是一个实用的技巧，尤其在构建用户界面或布局时。本篇文章将详细介绍如何利用border属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在...
这种方法利用了CSS边框的透明性质和边框宽度来创建形状。本文将深入探讨如何使用:before和:after伪元素来实现这一技术。 首先，让我们看看如何使用基本的CSS规则创建一个向上指的箭头。以下是一个简单的例子： ```...
在实际应用中，CSS三角形常用于创建下拉菜单的箭头、提示框的指向符号等。通过结合其他CSS属性，如`position`和`z-index`，可以实现更丰富的交互效果。 在提供的链接中，"https://kingkit.iteye.com/blog/692203"，...
在实际应用中，小三角形常用于下拉菜单、提示气泡、箭头指示等元素。例如，一个带有向下箭头的按钮可以通过将三角形元素与文本元素进行相对定位来实现。学习这些技巧不仅能够提高页面设计的灵活性，还能减少对图片的...
CSS三角形广泛应用于下拉菜单的箭头、提示框的指向符号、分隔线等。它们不仅提供视觉引导，还可以提高用户体验。 总结，CSS创建三角形的核心是利用边框属性的特性。通过巧妙地设置边框的宽度和颜色，我们可以创造出...
在CSS世界中，创造出各种形状是一项基本技能，而“用CSS写出三角形”是一个常见的需求，尤其是在构建下拉菜单、提示框或者箭头效果时。本文将深入探讨如何利用CSS来绘制三角形，并通过实际的代码示例进行解析。 ...
在网页设计中，纯CSS实现的小三角形是一种常见的技巧，常用于创建下拉菜单的箭头、提示框的指向符号等。这种技术基于CSS边框的特性，巧妙地利用了边框之间的交汇点来形成一个视觉上的三角形。下面我们将详细讲解如何...
为了使箭头更符合设计需求，还可以通过伪类（如`:hover`, `:active`, `:focus`）来实现动态效果，例如改变颜色或增加边框。 总之，掌握纯CSS3实现箭头的方法能极大地提高网页开发的效率和灵活性。通过理解边框技巧...
本文将详细介绍如何使用CSS来实现一个带有阴影和小箭头的黑色风格下拉菜单。 首先，我们需要了解CSS（层叠样式表）的基本概念。CSS是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言...
例如，我们可以创建一个包含多个选项的列表，然后使用CSS将其隐藏，只显示一个带有三角箭头的按钮。当用户点击按钮时，通过JavaScript显示或隐藏列表： ```html 下拉菜单 选项1 选项2 选项3 ``` ```css ...
其中，在导航条的各个选项旁边添加小三角形（或者称之为下拉箭头），可以指示该选项下还有更多内容，提供给用户下拉菜单的操作提示。这篇文章讲解的CSS实现带有小三角形的导航条菜单代码，是非常实用的一个技巧。 ...
CSS三角箭头是指利用CSS（层叠样式表）的属性来创建箭头形状的图形，常用于网页设计中，比如对话框箭头、下拉菜单箭头等。传统的做法会使用图片作为箭头，但这种方法需要两张图片来处理hover效果，对于只需要一个小...
这个简单的CSS实现不仅展示了如何利用纯CSS创建动态效果，还强调了如何利用伪元素（如`em`）来增强网页的视觉表现。这种方法在不依赖JavaScript或图像的情况下，为网页添加了丰富的交互性，同时保持了代码的简洁性...
通过以上步骤，我们可以轻松地在CSS中创建不同方向的三角形，以实现诸如下拉菜单箭头、提示框指向等效果。这种技术的优点在于它轻量级、响应快速且易于维护。理解这一原理后，你还可以根据需要调整边框颜色、宽度...
其中，使用CSS实现小三角形效果是一个常见的需求，它可以在网页中制作出整洁的视觉效果，比如下拉菜单的小箭头、提示信息的小尾巴等。在本篇内容中，将详细介绍如何利用CSS实现小三角形效果，并提供实例代码。 首先...
在实际应用中，CSS三角形常用于创建下拉菜单的箭头、提示框的指向标志等。通过熟练掌握这一技巧，前端开发者可以更加自如地处理界面元素的细节，提高页面的美观度和交互性。 总的来说，CSS三角形是前端开发中的一个...
3. **下拉箭头样式**： ```css QComboBox::drop-down { border-image:url(:/image/light/list_t.png); } QComboBox::down-arrow { image:url(:/image/light/drop.png); } ``` `QComboBox::drop-down`用于...