Javascript 单击图像悬停时显示的文本

我有

• 我想在和图像悬停时显示文本（使用

  .animate

  ）
• 当文本显示并悬停时，用户可以单击它
• 当文本和图像都未悬停时，文本将淡出
• 用户不能在不先悬停图像的情况下悬停文本

有人能帮我吗

以下是我所做的：

html:

<div id="container">
    <img src="blabla.jpg" />
    <p id="p1"> click here ! </p>
</div>

简单css：

#container{
    position:relative;
    top: 20px;
    left:20px;
    width:110px;
    height:110px;
}

#p1{
    position:relative;
    color:white;
    width:110px;
    text-align:center;
    margin-left:-55px;
    left:50%;
    background-color: navy;
    height:20px;
    opacity:0;
    top: -129px;
}

---

我只是用CSS做的。更容易使用

.box{
背景：红色；
宽度：100px；
高度：100px；
位置：相对位置；
}
.box:将鼠标悬停在a上{
顶部：10px；
不透明度：1；
}
a{
-webkit转换：all.4s；
-moz转换：all.4s；
-o-过渡：全部。4s；
-ms过渡：全部.4s；
过渡：全部。4s；
背景：蓝色；
颜色：#fff；
位置：绝对位置；
排名：0；
左：0；
右：0；
文本对齐：居中；
不透明度：0；
}

jsiddle链接已更新。。旧版本是一个旧版本。我会将悬停逻辑向上移动到容器元素，只需使其与图像的尺寸相同即可。这样，当你将鼠标移到文本上时，文本不会消失。使用如何实现呢？抱歉，我刚刚意识到我只共享了JS Fiddle链接，如果你想参考我的答案，

#container{
    position:relative;
    top: 20px;
    left:20px;
    width:110px;
    height:110px;
}

#p1{
    position:relative;
    color:white;
    width:110px;
    text-align:center;
    margin-left:-55px;
    left:50%;
    background-color: navy;
    height:20px;
    opacity:0;
    top: -129px;
}