Hover时文本从Div底部移入却显示在外部的技术问题求助

你遇到的问题核心是容器没有隐藏超出范围的内容，导致文本在动画开始前就暴露在Tile外部。咱们直接通过CSS调整就能搞定，下面是具体方案：

关键思路 #

1. 给红色Tile设置overflow: hidden，这样超出容器边界的内容会被隐藏，初始时文本在Tile底部外就看不到了。
2. 让文本元素初始位置完全位于Tile底部下方，hover时通过位移动画移回Tile内部。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>Tile Hover Animation</title>
    <!-- 如果你还是想用jQuery，保留你的脚本引入即可，纯CSS方案更轻量 -->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/myscript.js"></script>
    <style>
        .tile {
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative; /* 让内部绝对定位的文本以它为参照 */
            overflow: hidden; /* 核心：隐藏超出容器的内容 */
            cursor: pointer;
            margin: 20px;
        }
        .tile-text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            color: white;
            background-color: rgba(0, 0, 0, 0.6);
            /* 初始时完全下移到Tile底部之外 */
            transform: translateY(100%);
            /* 平滑过渡动画 */
            transition: transform 0.3s ease-in-out;
        }
        /* 悬停时将文本移回Tile内部 */
        .tile:hover .tile-text {
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div class="tile">
        <div class="tile-text">这是从Tile底部移入的文本</div>
    </div>
</body>
</html>

如果你偏好jQuery实现（替代CSS的hover效果） #

把下面这段代码放到你的myscript.js里：

$(document).ready(function() {
    $('.tile').hover(
        // 鼠标移入时
        function() {
            $(this).find('.tile-text').css('transform', 'translateY(0)');
        },
        // 鼠标移出时
        function() {
            $(this).find('.tile-text').css('transform', 'translateY(100%)');
        }
    );
});

这样调整后，文本初始时完全藏在Tile底部外面（因为overflow:hidden看不到），hover时会平滑地从Tile底部内部"滑出来"，完美符合你的需求~

内容的提问来源于stack exchange，提问作者Jaspreet Singh