javascript - 在鼠标悬停时显示和隐藏 Div

Question

嘿伙计们，这里只需要一点帮助，它非常接近我所追求的，但不完全是。

我想要将鼠标悬停在上面的文本链接对目标 div 中的隐藏文本进行动画处理。因此，当我将鼠标悬停在链接 A 上时，该文本就会淡入；当我将鼠标悬停在链接 B 上时，之前的文本会消失，新的文本会淡入。

这是我的 JavaScript:

<script type="text/javascript">
function ShowHide(){
    $("#textMessages").animate({"height": "toggle"}, { duration: 1000 });
    }
</script>

这是我的链接:

<a onMouseOver="ShowHide(); return false;" href="#">Message A</a>

<a onMouseOver="ShowHide(); return false;" href="#">Message B</a>

<a onMouseOver="ShowHide(); return false;" href="#">Message C</a>

这是我的目标 div，其中包含要淡入和淡出的文本片段:

<div id="textMessages">

<div id="defaultMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="MessageA">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="MessageB">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

<div id="MessageC">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

</div>

我假设我需要设置#MessageA/B/C display:none

Answer 1

这是一个 jsFiddle，它可以完成我认为您正在尝试做的事情。

http://jsfiddle.net/rcravens/md3Xe/

如果不是这样，请提供其他信息。

鲍勃