gpt4 book ai didi

jquery - 使用 CSS 和/或 jquery 创建向下箭头,例如与所选标签颜色形成对比的 gmail 标签

转载 作者:行者123 更新时间:2023-11-28 14:37:33 25 4
gpt4 key购买 nike

我正在尝试为我正在使用的系统复制 gmail 标签功能。我正在使用 jQLable 插件来“显示”标签,但我们正在尝试实现的功能是:

当用户将鼠标悬停在标签的“颜色框”上时,会出现一个向下箭头/三 Angular 形,与该颜色框的背景形成鲜明对比。问题是你是怎么做到的?

是否有任何 jquery 插件可以帮助您做到这一点,或者它可以通过纯 CSS 来完成吗?

我查看了 gmail 页面的源代码,三 Angular 形似乎是一个 unicode 字符,显示如下:

<div class="p8" style="">▼</div>

只是复制粘贴三 Angular 形似乎甚至没有在浏览器上呈现它 :) - 我什至为它输入了 unicode 字符代码,但也没有运气。

然后我创建了一个 triangle-div 并将其绝对定位在我想要的位置,但我为此创建了一个额外的 div,但上面的代码似乎将三 Angular 形作为文本!这让我难住了!

所以我要找的是:

  1. 有没有办法在不创建额外的 div 和调整它的样式的情况下让三 Angular 形显示出来,就像上面 gmail 页面的代码片段一样?即,是否有我遗漏的特殊字符代码?
  2. 如何使三 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com