Javascript 如何使用悬停效果使阅读更多文本

我有5条短信，其中2条是隐藏的。在下面的js代码中，我可以使用

单击
，看到这两个文本，但我需要使用
悬停
效果。我怎样才能解决这个问题

js:

html:




+

我需要制作悬停效果，我的意思是当我在我的文本块上悬停时，我需要看到另外两个隐藏的文本。请帮我回答这个问题。
而不是
$（'.btn'）。在（'click'）
上使用
$（'.btn'）。在（'mouseOver'）上可以使用Css选择器进行悬停。在下面的代码中，使用Css选择器将“a”标记更改为黄色背景

a:hover { 
  background-color: yellow;
}

对于悬停javascript函数，jquery可以如下使用



$（'.btn'）。悬停（函数（）{
if（$（this）.parent（）.height（）>=50）{
$（this）.parent（）.animate({
高度：25+‘像素’
});
$（this）.parent（）.parent（）.removeClass（'active-animated'）.css（'zIndex'，'1'）；
$（this.parent（）.parent（）.parent（）.css（'zIndex'，'1'）；
}否则{
$（this）.parent（）.animate({
高度：100+“%”
});
$（this.parent（）.parent（）.parent（）.css（'zIndex'，'9999'）；
$（this.parent（）.parent（）.addClass（'active-animated'）；
}
});





+
如果你觉得合适的话，你可以用纯CSS来做这件事


.bottom{
溢出：隐藏；
高度：25px；
宽度：100%；
}
.底部a{
高度：25px；
显示：内联块；
}
#包裹{
位置：相对位置；
边缘底部：25px；
}
#btn{
光标：指针；
位置：绝对位置；
底部：-50px；
左：0；
高度：30px；
宽度：30px；
}
#btn：悬停+底部{
高度：自动；
}

+


如果您使用的是jQuery，只需将
单击
更改为
鼠标悬停
即可在用户将鼠标悬停在绑定元素上时触发事件。为什么两次单击
$（'p#string'）和$（'.btn'）
都是目标元素same@AndroidNoobie非常感谢。但我如何才能使所有的块，而不仅仅是图标？但若我想在块上，而不仅仅是图标上悬停，那个么我该怎么做呢？谢谢。用（'mouseOver'）上的$（'.bottom'）。这意味着您每次将鼠标悬停在
底部
元素的任何部分（包括其中的三个文本）上时，都会看到所有五个元素。谢谢，但我如何才能使鼠标悬停在所有块上而不仅仅是图标？您所说的
所有
块是什么意思
.bottom
？是的，我需要将鼠标悬停在
.bootom
上，您能用我的
js
代码显示它吗？我试着换课，但没用。谢谢你，很管用！还有一个问题。当我看到隐藏文本时，我的下块向下移动。如何避免这种情况？@AsasSas我已经附加了一个jquery函数来使用javascript进行鼠标悬停。正如你所问：）
<div class="bottom">
<a href="">First Text</a>
<a href="">Second Text</a>
<a href="">Third Text</a><br>
<a href="">Fourth Text</a>
<a href="">Fifth Text</a>    
<p id="string" class="btn"><span class="span_icon">+</span></p>
</div>

a:hover { 
  background-color: yellow;
}