Javascript 在悬停时隐藏我的div，但显示另一个-HTML/CSS

我有三段

当我将鼠标悬停在已经显示的段落上时，我想显示它下面的第二段，并用第三段替换第一段

对于我的css，因为当我将鼠标悬停在第一段上时，它会显示它和第二段，当我尝试说“阻止”第一段并显示第三段时，UI会变得疯狂，因为它同时尝试阻止和显示，我能做什么

.nodeParagraph{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； z指数：10000000； 左：20px； 顶部：20px； 宽度：265px； } .nodeParagraph:悬停+.nodeParagraph 1{ 显示：块； } .nodeParagraph1{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； z指数：10000000； 左：47.5px； 顶部：10px； 宽度：265px； 显示：无； } .nodeParagraph2{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； z指数：10000000； 左：20px； 顶部：20px； 宽度：265px； } .nodeParagraph:悬停{ 溢出：可见； 空白：正常； 宽度：自动； } 我是世界上最伟大的

世界

---

我是世界上最伟大的

检查这个片段，它可能会帮助你。 .nodeParagraph{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； z指数：10000000； 左：20px； 顶部：20px； 宽度：265px； } .nodeParagraph:悬停+.nodeParagraph 1{ 显示：块； } .nodeParagraph1{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； z指数：10000000； 左：47.5px； 顶部：10px； 宽度：265px； 显示：无； } .nodeParagraph2{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； z指数：10000000； 左：20px； 顶部：20px； 宽度：265px； } .nodeParagraph.悬停显示{ 显示：无； } .nodeParagraph:悬停。悬停时隐藏{ 显示：无； } .nodeParagraph:悬停。悬停时显示{ 显示：块； }

我是世界上最伟大的。。。 我是世界上最伟大的

---

world

已编辑：以防需要javascript解决方案

嗯。首先，我会将您的第一和第三段放在另一段的上面，并使用一点jquery来替换您的悬停css属性

在使用position:absolute之后，第二段的位置需要重新定位

我使用指针事件：无；在第三个上面，因为它在第一个上面

基本脚本只显示了悬停时的第二段，我还为第一段添加了类颜色，因为一个文本覆盖另一个文本会产生一种粗体效果

$.nodeParagraph.hoverfunction{ $.nodeParagraph1.toggle； $.nodeParagraph2.toggle； $.nodeParagraph.toggleClasscolor； }; .nodeParagraph{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； 左：20px； 顶部：20px； 宽度：265px； 位置：绝对位置； } .nodeParagraph1{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：相对位置； 字体大小：300； 左：47.5px； 顶部：40px； 宽度：265px； 显示：块； 显示：无； } .nodeParagraph2{ 字体大小：14px； 字母间距：0.03px； 光标：指针； 字体系列：$字体系列库； 位置：绝对位置； 字体大小：300； 左：20px； 顶部：20px； 宽度：265px； 指针事件：无； 显示：无； } .color{color:fff；} 我是世界上最伟大的

世界

---

我是世界上最伟大的

为什么不使用省略号呢？这样你就不必乱用js，你的html在语义上就更正确了，不需要重复文本

.段{ 宽度：175px；/*用于演示*/ 空白：nowrap；/*需要这三个选项来使段落具有省略号*/ 溢出：隐藏； 文本溢出：省略号； } .第段：悬停{ 空白：正常；/*更改回正常p*/ }

---

我是世界上最伟大的

你标记Javascript是因为你在用JS寻找答案？我删除了它：如果我诚实的话，我不确定Javascript是否会参与其中。好吧，用JS我认为更简单，但这取决于你：我不会回避任何解决方案！如果有javascript解决方案，请告诉我，我很想听听。顺便说一句，我正在使用Angular，如果这会影响任何简单和函数的话 民族的。我喜欢。