html / css:悬停div的每个单词时加下划线,不换行[重复]

Posted

技术标签:

【中文标题】html / css:悬停div的每个单词时加下划线,不换行[重复]【英文标题】:html/css: underline on hover each word of a div, without wrapping [duplicate] 【发布时间】:2019-06-04 00:01:37 【问题描述】:

假设我有以下 div:

<div>aaa, bbb- ccc. eee fff</div>

我想知道是否有一个 css 技巧/属性/函数可以在悬停时将 text-decoration: underline 应用于 div 并且下划线仅出现在光标所在的单词中?我知道我可以通过将每个单词包装在一个跨度中来做到这一点,但这似乎不是很有效。

【问题讨论】:

span 中包装这个词没有发现任何效率问题。做一些 CSS 技巧(假设它存在于您的案例中)它可能会在某些浏览器版本中引起一些问题。我会说在这里玩安全。使用 span 标签进行样式设置没有错 ***.com/a/5688758/5385381 【参考方案1】:

您可以用空格分割并为每个单词添加跨度。然后你可以像下面这样将文本装饰写入跨度:

div:hover span 
  text-decoration: underline;

【讨论】:

他说:我知道我可以通过将每个单词包装在一个跨度中来做到这一点,

以上是关于html / css:悬停div的每个单词时加下划线,不换行[重复]的主要内容,如果未能解决你的问题,请参考以下文章

悬停时无法更改css中的背景图像[重复]

悬停时菜单下划线,文本长度而不是元素长度

css轻松搞定显示隐藏的效果

CSS 效果 :hover::after 在子元素上 :hover 在父元素上

我想让一个词在鼠标悬停期间执行 CSS 动画后消失

悬停文本使 Div 更改颜色 - CSS