如何仅用HTML和CSS实现跨文件登录表单悬停弹出效果？

核心结论 #

仅用HTML和CSS没法实现跨HTML/PHP文件加载内容并触发悬停显示——HTML/CSS没有跨文件读取内容的能力。得结合PHP的引入功能，或者把登录表单的代码整合到index.php里，再配合CSS实现悬停效果。

可行实现方案 #

方案1：用PHP把login.php的登录表单引入到index.php

修改index.php的代码，将login.php中未登录状态的表单逻辑放到login-popover容器内，这样CSS的悬停选择器才能生效。注意要开启session，和login.php保持一致。

修改后的index.php代码片段：

<section>
    <div class="logs">
        <div class="login-popover">
            <a href='login.php' target='_blank'>Login</a>
            <!-- 引入登录表单逻辑 -->
            <?php
                session_start();
                if(!isset($_SESSION['account'])) {
            ?>
                <span class="login">
                    <h3>Log In here</h3><br>
                    <form id="inputs" action="login-sql.php" method="post">
                        <div class="form-inputs">
                            <input type="text" name="username" placeholder="username"><br>
                        </div>
                        <div class="form-inputs">
                            <input type="password" name="password" placeholder="password"><br>
                        </div>
                        <div class="forget">
                            <a href="">Forgot password?</a>
                        </div><br>
                        <input type="submit" name="submit" value="Submit"><br>
                        <a href="signup.php" class="createacc">Sign Up</a>
                    </form>
                </span>
            <?php
                }
            ?>
        </div>
        <a href='logout-sql.php'>Logout</a>
        <a href='signup.php' target='_blank'>Sign Up</a>
    </div>
</section>

方案2：直接把login.php的表单代码复制到index.php

如果不想用PHP引入，手动把login.php中未登录状态的表单HTML代码复制到index.php的login-popover容器内，同样能让CSS悬停效果正常触发。

CSS适配调整 #

原CSS里的一些设置可能导致弹窗样式异常，建议修改：

/* 确保弹窗内输入框宽度正常 */
.login-popover #inputs .form-inputs input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 2px solid #eee;
    font-size: 1rem;
    outline: none;
}

/* 修正弹窗箭头变形问题 */
#inputs::before {
    content: '';
    position: absolute;
    border: 1rem solid;
    border-color: #fff transparent transparent;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0; /* 移除多余的宽度设置 */
}

关键注意点 #

1. 纯HTML/CSS读不了其他文件的内容，必须通过后端语言整合或者手动复制代码到当前页面。
2. 原代码中#inputs表单不在login-popover容器内，login-popover:hover #inputs选择器根本触发不了，必须把表单放到login-popover容器里，形成嵌套关系。

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