Html 带悬停的突出显示文本的正确CSS
正在引用此代码笔： 我想突出显示一些文本，同时在行之间留有较大的间隙，并在将鼠标悬停在单个文本块上时保持悬停事件不变。现在，当你点击行与行之间的空白时，它会快速闪烁 我试过设置身高和其他一些东西，但没有一个能起作用，我有点迷路了 代码也在下面引用 div{ 宽度：90%；/*调整以适应JS代码段布局*/ 保证金：0自动； 线高：2； } 跨度{ 高度：2米； 背景：rgba255,0,0,0.2； 垂直对齐：中间对齐； } 跨度：悬停{ 背景：rgba255,0,0,0.5； } Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。 休止符。 这是一个很好的解释。尼斯拉奥纳雷·索利西图丁的威尼斯情欲。不必怀孕，索达莱斯奥奇，布兰迪麦格纳。 不要喝太多的苏打水。 毛里斯·奥古斯·莱克托斯（Mauris augue lectus）、两人之间的关系，以及他的名言。 佩伦特斯·塞德·努拉·布兰迪特、苏西比特·里苏斯·欧盟、马莱苏阿达·胡斯托。 达格尼西姆·麦格纳的福斯。在廷西德蒙莫里斯的奎斯克。 奥古斯·莫里斯，奥纳雷·埃吉特·洛雷姆·塞德，拉齐尼亚·胡斯托。 空侧和前庭。 两位是艾格特·莫里斯元素狮子座权杖权贵，蓄能时代前。 Donec设施位于乌尔纳的sollicitudin urna，其效率为。 佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。 杜伊斯在sem nibh。8月，怀孕妇女的面部表情和面部表情。 埃尼安·达皮布斯（Aenean dapibus sem）和多尔·维尼那提（venenatis facilisis）。塞德·阿库·托托，卢克图斯·伊德·菲利斯·奎斯，威尼斯人马莱苏亚达·利奥。这是我的生活。 Phasellus magna eros，lobortis a faucibus a，elementum et sem。Nunc门拍卖拱门，欧盟viverra tellus前庭id.Morbi与magna id不符。 请不要使用车辆。 耳前庭。Html 带悬停的突出显示文本的正确CSS,html,css,Html,Css,正在引用此代码笔： 我想突出显示一些文本，同时在行之间留有较大的间隙，并在将鼠标悬停在单个文本块上时保持悬停事件不变。现在，当你点击行与行之间的空白时，它会快速闪烁 我试过设置身高和其他一些东西，但没有一个能起作用，我有点迷路了 代码也在下面引用 div{ 宽度：90%；/*调整以适应JS代码段布局*/ 保证金：0自动； 线高：2； } 跨度{ 高度：2米； 背景：rgba255,0,0,0.2； 垂直对齐：中间对齐； } 跨度：悬停{ 背景：rgba255,0,0,0.5； } Lorem
我能想到的唯一解决办法就是搭脚手架 梅因先生{ 宽度：20%； 保证金：0自动； 线高：2； 边框：1px实心； } 跨度{ 高度：2米； 背景：rgba255,0,0,0.2； 垂直对齐：中间对齐； 边框：1px实心； } .脚手架：悬停>跨度{ 背景：rgba255,0,0,0.5； } Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。 Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。 Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。
我能想到的唯一解决办法就是搭脚手架 梅因先生{ 宽度：20%； 保证金：0自动； 线高：2； 边框：1px实心； } 跨度{ 高度：2米； 背景：rgba255,0,0,0.2； 垂直对齐：中间对齐； 边框：1px实心； } .脚手架：悬停>跨度{ 背景：rgba255,0,0,0.5； } Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。 Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。 Lorem ipsum dolor sit amet，是一位杰出的献身者。Morbi hendrerit，enim eu发酵调味品，nulla tellus suscipit libero，quis tincidunt eros metus sed leo。
您还可以使用CSS转换属性来实现这一点。具体来说，在mouseout上引入一个转换延迟，但在hover上不引入延迟 所以。。。将发生的情况是，在悬停时背景会发生变化，但在鼠标移出时，背景转换需要整整一秒或1.25秒或2秒等时间才能开始。如果用户移动到另一个范围，可以说背景更改将被覆盖/取消，保持背景颜色不变。最终结果正是您所要求的 这里的神奇之处在于添加这两个CSS指令：
span {transition:background-color 0s ease-out 1s;} /* 1s delay on mouseout */
span:hover{transition:background-color 0s ease-out 0s;} /* No delay on hover */
您还可以使用CSS转换属性来实现这一点。具体来说，在mouseout上引入一个转换延迟，但在hover上不引入延迟 所以。。。将发生的情况是，在悬停时背景会发生变化，但在鼠标移出时，背景转换需要整整一秒或1.25秒或2秒等时间才能开始。如果用户移动到另一个范围，可以说背景更改将被覆盖/取消，保持背景颜色不变。最终结果正是您所要求的 这里的神奇之处在于添加这两个CSS指令：
span {transition:background-color 0s ease-out 1s;} /* 1s delay on mouseout */
span:hover{transition:background-color 0s ease-out 0s;} /* No delay on hover */
将悬停移动到指定位置parent@ZohirSalak这会改变所有孩子的背景，这不是我想要的，我以为只有一个span@ZohirSalak我也这么想。你可以使用CSS转换属性来实现这一点。请参见下面的答案。将悬停移动到parent@ZohirSalak这会改变所有孩子的背景，这不是我想要的，我以为只有一个span@ZohirSalak我也这么想。你可以使用CSS转换属性来实现这一点。请看下面我的答案。我得出了一些类似的结论，但句子之间并不像通常在一段文字中那样相互交替。我想突出显示一些文字，同时让行与行之间有较大的间隙，将鼠标悬停在单个文本块上时，保持悬停事件不变。关键字there is block如果您将提供的代码段展开到全屏，您会看到一些行从中间开始，并在下一行的开头结束，现在尝试保持悬停效果是不可能的，因为你将悬停在其他文本上。我得出了类似的结论，但句子不会像通常在文本段落中那样从一个句子到另一个句子。我想突出显示一些文本，同时使行与行之间有较大的间隙，将鼠标悬停在单个文本块上时，保持悬停事件不变。关键字there is block如果您将提供的代码段展开到全屏，您会看到一些行从中间开始，并在下一行的开头结束，现在尝试保持悬停效果是不可能的，因为您将悬停在其他文本上。这是一个有趣的解决方案，但最终退出后的延迟不是我想要的。看起来是最好的解决方案！这是一个有趣的解决方案，但最终退出后的延迟不是我想要的。看起来是最好的解决方案！当我在同一个区域内移动时，仍然会有闪光span@dvreed77你确定？哪个浏览器？对我来说，用铬和FFon铬做测试很好。我想发送GIF，但找不到简单的方法。@dvreed77检查更新，后面的移动似乎有点棘手，因为
所有的伪元素都在上面。我更新了伪文件的位置element@dvreed77增加了一个新的想法，应该更好，更少的黑客；当我在同一个区域内移动时，仍然会有闪光span@dvreed77你确定？哪个浏览器？对我来说，用铬和FFon铬做测试很好。我想发送GIF，但找不到简单的方法。@dvreed77检查更新，后面的移动似乎有点棘手，因为所有的伪元素都在彼此的上方。我更新了伪文件的位置element@dvreed77增加了一个新的想法，应该更好，更少的黑客；