javascript - 试图在 div 悬停上居中阅读更多链接？

Question

我已经创建了 2 个大中型内容 div，我想将鼠标悬停在上面并显示阅读更多链接，但目前我在将阅读更多链接置于 div 中间时遇到问题？

是否还有更好的脚本编写方式？我目前正在学习 js/jquery 并尝试解决各种可能在元素中派上用场的事情。

是否可以编写代码，以便无论容器 div 的大小如何，阅读更多内容都可以适应中心？

来源可以在这里查看http://jsfiddle.net/kyllle/R9NNt/

Answer 1

通过给定 width: 100%; 使 div 水平居中；文本对齐:居中；

http://jsfiddle.net/R9NNt/5/

这里是垂直的。

http://jsfiddle.net/R9NNt/21/

这里是 jQuery 代码:

$(function() {
    $(".large, .medium").hover(
        function() {
            $(this).children(".content").fadeTo(200, 0.25).end().children(".hover").show();
        },
        function() {
            $(this).children(".content").fadeTo(200, 1).end().children(".hover").hide();
        }
    ).each( function( index, item ) {
        var hover = $(this).find('.hover');
        var top = Math.round( ( $(this).find('.content img').outerHeight() - hover.outerHeight() ) / 2);
        hover.css('top', top + 'px');
    });
});