我正在尝试为我正在使用的系统复制 gmail 标签功能。我正在使用 jQLable 插件来“显示”标签，但我们正在尝试实现的功能是:
当用户将鼠标悬停在标签的“颜色框”上时，会出现一个向下箭头/三 Angular 形，与该颜色框的背景形成鲜明对比。问题是你是怎么做到的？
是否有任何 jquery 插件可以帮助您做到这一点，或者它可以通过纯 CSS 来完成吗？
我查看了 gmail 页面的源代码，三 Angular 形似乎是一个 unicode 字符，显示如下:
<div class="p8" style="">▼</div>
只是复制粘贴三 Angular 形似乎甚至没有在浏览器上呈现它 :) - 我什至为它输入了 unicode 字符代码，但也没有运气。
然后我创建了一个 triangle-div 并将其绝对定位在我想要的位置，但我为此创建了一个额外的 div，但上面的代码似乎将三 Angular 形作为文本!这让我难住了!
所以我要找的是:
- 有没有办法在不创建额外的 div 和调整它的样式的情况下让三 Angular 形显示出来，就像上面 gmail 页面的代码片段一样？即，是否有我遗漏的特殊字符代码？
- 如何使三 Angular 形的“颜色”与背景形成对比？是否有 jquery 插件(我猜纯 CSS 在这里不起作用，对吗？)例如如果用户选择黑色标签颜色，则三 Angular 形最好显示为较浅的颜色 - 如果预设为黑色，则三 Angular 形将不可见。
谷歌搜索这样的东西结果很奇怪。看来我需要人工回复 :D
更新:上面的 #1 已解决并且工作正常。这是使用多个编辑器的问题。然而，#2 能够将箭头与背景“对比”仍然是“ Unresolved ”:(
最佳答案
第一个问题的答案: 您可以呈现该箭头，但您的文档必须是 UTF-8(在您的编辑器中选择编码)，并且还必须在代码中指定它，如下所示:
<!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" />
...
希望这对您有所帮助。干杯
关于jquery - 使用 CSS 和/或 jquery 创建向下箭头，例如与所选标签颜色形成对比的 gmail 标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6555590/