草庐IT

jquery - 防止在单击时隐藏缩写工具提示

coder 2023-08-12 原文

当我使用 <abbr>元素，我通常在缩写下添加虚线边框以指示有更多信息可用:

工具提示大约需要两秒钟才会出现*，并且由于它不是立即出现的，因此用户点击文本似乎很自然(尤其是因为它看起来类似于链接)。

但是，如果缩写已经可见，则单击缩写会隐藏工具提示，如果尚未显示，则不会显示它。

有没有办法阻止这种点击行为？

我尝试了显而易见的方法，但没有成功:

$('abbr').on('click', function(e) { e.preventDefault(); });

(*) - 在 Chrome 中 2 秒，在 Firefox 中大约 1 秒

最佳答案

这是我能找到的最佳选择。由 Andres Ilich 提供在这个 SO question .

(他回答的问题不属于这个问题，但他构建这个元素的方式实际上解决了你的问题。)(这不是我的工作，Andres Ilich 找到了这个答案，只是分享知识:}对于我版本引用底部)

他所做的是使用伪元素为 a 属性设置样式。如果单击该元素，它不会隐藏 :after 元素，这是一个很好的解决方法。

(他正在使用 title 值输入到 content: ""; 中，这非常酷!)

这是添加新标题的代码:

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

他的 fiddle :JSFIDDLE

唯一的问题是基本标题仍然显示，但我找不到更好的解决方法。唯一不使用 title 属性的选项是我作为评论留下的建议。

这是我使用 value 属性而不是 title 来添加值的版本。​​这没有弹出两个工具提示，但仍然得到想要的效果。

<a href="#" value="This is another link">Mauris placerat</a>

我的 fiddle :JSFIDDLE

干杯!

关于jquery - 防止在单击时隐藏缩写工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20690103/

jquery防止codebackground-imagesectionhtmlcss

有关jquery - 防止在单击时隐藏缩写工具提示的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  3. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  4. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  5. ruby-on-rails - 有没有一种工具可以在编码时自动保存对文件的增量更改？ - 2

    我最喜欢的Google文档功能之一是它会在我工作时不断自动保存我的文档版本。这意味着即使我在进行关键更改之前忘记在某个点进行保存，也很有可能会自动创建一个保存点。至少，我可以将文档恢复到错误更改之前的状态，并从该点继续工作。对于在MacOS(或UNIX)上运行的Ruby编码器，是否有具有等效功能的工具？例如，一个工具会每隔几分钟自动将Gitcheckin我的本地存储库以获取我正在处理的文件。也许我有点偏执，但这点小保险可以让我在日常工作中安心。 最佳答案 虚拟机有些人可能讨厌我对此的回应，但我在编码时经常使用VIM，它具有自动保存功

  6. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  7. ruby - 是否可以将 IRB 提示配置为动态更改？ - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录，但我不知道如何在每个命令后进行提示更新。最终，我想在日常工作中更多地使用IRB，让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  8. ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2

    我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中

  9. Ruby隐藏与覆盖 - 2

    我刚刚了解到，在Java中，覆盖和隐藏之间是有区别的(静态方法是隐藏的，而不是覆盖)，这意味着Java使用早期绑定(bind)和后期绑定(bind)。是否有与方法隐藏类似的东西，或者它只是具有方法重写？ 最佳答案 Java具有三种不同的“方法”:实例方法，静态方法和构造函数。Ruby只有一个:实例方法。在Java中，静态方法的行为必须不同于实例方法，因为类不是对象。它们没有类，因此也没有父类(superclass)，因此没有要覆盖的内容。在Ruby中，类与其他任何对象一样都是对象，它们具有一个类，该类可以具有父类(superclas

  10. ruby-on-rails - 我如何告诉 Rails 如何正确地大写首字母缩写词？ - 2

    我的一个模型中有一个名为sui的字段。它代表“标准用户标识符”。当该字段出现验证错误时，Rails会打印“Suiisrequired”或“Suiisalreadytaken”。如何告诉Rails'sui'.titleize是“SUI”？我查看了Inflector.human，但这并不完全正确。 最佳答案 在这种情况下，我使用custom_err_msg插入。安装后，您可以提供如下自定义错误消息:validates_presence_of:sui,:message=>'^SUIisrequired'当您将^放在开头时，Rails不会输

随机推荐