正文 

当前位置： 首页 > 知识 >

悬停时如何使用 CSS 将角度字符添加到此按钮的文本中？

     2023-05-08     106

关键词：

【中文标题】悬停时如何使用 CSS 将角度字符添加到此按钮的文本中？【英文标题】：How are angle characters being added to this button's text with CSS on hover? 【发布时间】：2021-10-14 03:00:26 【问题描述】：

我在W3Schools 上发现了以下代码。它具有悬停效果；当您将鼠标悬停在按钮上时，它会变为 Hover>>，并且最后两个字符 >> 会在悬停时自动添加。我没有看到任何 HTML 代码。它从哪里来的？它在 HTML/CSS 中有单独的代码吗？我的意思是，>> 没有“文本”，而“悬停”有 文本

<!DOCTYPE html>
<html>
<head>
<style>
.button 
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;


.button span 
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;


.button span:after 
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;


.button:hover span 
  padding-right: 25px;


.button:hover span:after 
  opacity: 1;
  right: 0;

</style>
</head>
<body>


<button class="button" style="vertical-align:middle"><span>Hover </span></button>

</body>
</html>

【问题讨论】：

【参考方案1】：

“魔法线”是两条线：

.button span:after 
  content: '\00bb';

HTML 代码 00bb 是字符 »。

【讨论】：

【参考方案2】：

伪元素的 CSS 规则必须具有 content 属性，否则它们根本不会出现在页面中。在大多数情况下，它是一个空字符串，因为它不包含文本并且以其他方式设置样式。在这种情况下，它实际上包含一个 HTML 实体代码。

.button span:after 
  content: '\00bb'; /* <-- Here's your huckleberry. */
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;

Here's the list

要在 HTML 中直接使用该字符，您可以在其名称中使用与符号：&amp;raquo;

【讨论】：

谢谢！我不能把 >> 放在 HTML 的正文中吗？ 我不明白你的问题。你打算让它像现在一样显示和隐藏吗？

当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

】当您使用javascript或jquery将鼠标悬停时，如何使图像或按钮发光？【英文标题】：Howdoyoumakeanimageorbuttonglowwhenyoumouseoverusingjavascriptorjquery?【发布时间】：2011-09-0804:50:10【问题描述】：我想在鼠标悬停在按钮或图像上时添加发光效... 查看详情

如何将表单控件添加到角度 8 中的文本区域

】如何将表单控件添加到角度8中的文本区域【英文标题】：Howtoaddformcontroltoatextareainangular8【发布时间】：2020-03-0711:29:27【问题描述】：我正在处理一个联系表单，但无法让表单使用ngModel提交textarea值。我不断收到来自浏览器的... 查看详情

如何使用 CSS 在悬停时向图像添加工具提示

】如何使用CSS在悬停时向图像添加工具提示【英文标题】：HowtoaddtooltiptoimageonhoverwithCSS【发布时间】：2016-08-2314:47:35【问题描述】：我有三张图片，在悬停时它们使用:hover在css中增加大小。当用户将鼠标悬停在图像上时，我还希... 查看详情

将鼠标悬停在按钮上时如何更改 div 的文本？

】将鼠标悬停在按钮上时如何更改div的文本？【英文标题】：HowdoIchangethetextofadivwhenIhoveroverabutton?【发布时间】：2014-08-0717:01:06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在... 查看详情

悬停按钮时如何更改svg颜色

】悬停按钮时如何更改svg颜色【英文标题】：howtochangesvgcolorwhenbuttonishovered【发布时间】：2019-10-1911:18:17【问题描述】：我正在尝试在按钮悬停时更改SVG的颜色。我尝试使用button:hover+svg，但这似乎不起作用。当我运行CSS时，SVG填... 查看详情

CSS样式：悬停时如何更改图像？

】CSS样式：悬停时如何更改图像？【英文标题】：CSSStyling:Howtochangetheimagewhenitishoveredover?【发布时间】：2015-04-2409:50:05【问题描述】：我正在尝试对图像进行悬停效果，当它悬停在图像上时，它将变为另一张图片。当我不使用锚... 查看详情

如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

】如何通过将鼠标悬停在同一页面上的图像上来触发CSS动画按钮【英文标题】：Howtotriggeracssanimatedbuttonbyhoveringoveranimageonthesamepage【发布时间】：2013-08-2501:17:58【问题描述】：我的网站出现问题。在主页上，我有一张图片。图片... 查看详情

如何摆脱悬停时附加的内置CSS？

】如何摆脱悬停时附加的内置CSS？【英文标题】：HowtogetridofinbuiltCSSthatgetsappendedonhover?【发布时间】：2020-01-2505:39:32【问题描述】：我使用的是Safari浏览器，我有这样的按钮-悬停时，如下所示-我没有从我这边添加任何css，但是... 查看详情

如何使用 React.createElement 添加悬停 CSS 样式

】如何使用React.createElement添加悬停CSS样式【英文标题】：HowtoaddhovercssstylewithReact.createElement【发布时间】：2022-01-2000:48:45【问题描述】：我正在使用React.createElement创建一个按钮：React.createElement(\'button\',style:button.key===this.state.cust... 查看详情

如何使用css在鼠标悬停时缩放图像？

图像缩放效果，是当鼠标悬停或单击时对图像进行缩放的一种应用效果。这种影响主要用于网站上。在我们要在图像上显示用户详细信息的情况下，这个效果很有用。有两种方法可以创建鼠标悬停效果。使用JavaScript使用CSS在本... 查看详情

角度：在悬停时更新范围

】角度：在悬停时更新范围【英文标题】：angular:updatingscopeonhover【发布时间】：2013-03-2405:50:09【问题描述】：我希望默认情况下隐藏主div的某些子div，当您将鼠标悬停在主div上时可见。我正在尝试使用Angular中的本机并忘记jquery... 查看详情

悬停时如何使引导按钮消失

】悬停时如何使引导按钮消失【英文标题】：HowcanImakemybootstrapbuttonsfadewhenhovered【发布时间】：2017-07-0413:55:41【问题描述】：我刚开始使用引导程序，并在我的页面上创建了一些导航按钮，它们太棒了！但是当你将鼠标悬停在按... 查看详情

如何通过使用引导程序和 HTML/CSS 单击按钮来激活按钮的切换？

...时间】：2021-09-1802:33:53【问题描述】：目前我的按钮具有悬停功能，我希望它应该保留在那里，但是当用户单击任何文本（“水，土壤”）时，应该激活切换功能。如本例所示，但我不知道如何通过悬停将其合并 查看详情

在悬停时添加字符而不移动文本

】在悬停时添加字符而不移动文本【英文标题】：addingcharacteronhoverwithoutmovingtext【发布时间】：2014-12-2810:28:38【问题描述】：尝试在悬停时添加一个字符，但我想在字符出现时不将文本向右移动。如果每个li前面有一个静态空格... 查看详情

如何向 QPushButton 添加悬停过渡？

】如何向QPushButton添加悬停过渡？【英文标题】：HowtoaddahovertransitiontoQPushButton?【发布时间】：2019-04-0417:10:11【问题描述】：我尝试使用样式表制作自定义QPushButton。当我们将鼠标悬停在按钮上时，我想自定义按钮的颜色。它有效... 查看详情

将按钮悬停在 Xamarin 表单 UWP 时删除边框

】将按钮悬停在Xamarin表单UWP时删除边框【英文标题】：RemoveborderwhenhoverabuttonXamarinformUWP【发布时间】：2019-04-0513:19:18【问题描述】：如何删除在Xamarin表单UWP中悬停按钮时显示的矩形边框。我已经参考了以下链接Removeborderofbuttonwh... 查看详情

按钮悬停效果

】按钮悬停效果【英文标题】：ButtonHoverEffect【发布时间】：2012-11-0519:39:17【问题描述】：我对CSS和网络编程很陌生。我想要做的是为按钮添加悬停效果。我通过使用2张图片来做到这一点。有一个名为下载的按钮，我在悬停代码... 查看详情

如何在悬停时将 CSS 类应用于动态生成的提交按钮？

】如何在悬停时将CSS类应用于动态生成的提交按钮？【英文标题】：HowtoapplyaCSSclassonhovertodynamicallygeneratedsubmitbuttons?【发布时间】：2013-02-2100:37:33【问题描述】：我有以下HTML/CSS代码，用于根据从数据库中检索到的行数显示页面... 查看详情