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

Question

我有this jsfiddle .

• 我想在图像悬停时显示文本(使用 .animate)。
• 当文本显示并悬停时，用户可以点击它。
• 当文本和图像都没有悬停时，文本淡出。
• 用户必须先悬停图像才能悬停文本。

有人可以帮我做吗？

这是我做的:

html:

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

j查询:

$(document).ready(function(){
                                        // on img hover
    $("img").hover(function() {
        $(this).next().animate({            // Change p1 style
            'opacity': '1',
            top: "+=10px"},
        200);
                                        // Non hovered   
    }, function() {
        $(this).next().animate({           // Restore p1 style
            'opacity': '0',
            top: "-=10px"},
        200);
    });


    $('#p1').hover(function() {    // On p1 hover
        $(this).next().css({          // change p1 style
            'opacity': '1',
            top: "-51px"});
    }, function() {                // Non hovered
        $(this).next().css({
            'opacity': '0',          // restore p1 style
            top: "-41px"});
    });

});

简单的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;
}

Answer 1

我仅使用 CSS 完成了此操作。更易于使用。

.box{
  background:red;
  width:100px;
  height:100px;
  position:relative;
}

.box:hover a{
  top:10px;
  opacity:1;
}

a{
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -o-transition:all .4s;
    -ms-transition:all .4s;
    transition:all .4s;
  background:blue;
  color:#fff;
  position:absolute;
  top:0;
  left:0;
  right:0;
  text-align:center;
  opacity:0;
}

<div class="box">
  <a href="http://google.co.uk">Click Me!</a>
</div>

上面代码的链接:
CodePen JSFiddle

看看Mr. Alien对此的更高级版本的评论。