CSS Zen Garden项目：实现:before图片hover切换及div延迟显示

项目背景与限制 #

• 正在完成大学课程项目：CSS Zen Garden 设计
• 限制：不可修改现有HTML结构，仅能添加类名，禁止使用JavaScript

需求目标 #

• 初始状态：显示 Brief.png 图片
• 悬停触发：
  1. 先切换显示 Brief.gif
  2. 延迟片刻后，切换显示div内的文本内容

当前已实现效果 #

• 仅当div未隐藏时，hover状态下png切换为gif的动画生效
• div的transition-delay延迟触发功能正常

尝试过的无效方法 #

• 尝试使用兄弟选择器（.letter:hover::before + .hide），但伪元素::before和div本身并非兄弟关系，无法生效

现有代码 #

CSS 代码 #

/** ### letter animation ### **/
.letter::before{
    align-items:normal;
    content: url('Brief.png');
    
}

.letter:hover::before{
    content: url('Brief.gif');

}

/** ## Hide & Show content of div ## **/
.hide{
   opacity: 0;
}
.hide:hover{ 
    overflow: auto;
    width: 33.33%;
    /**height: 50vh;**/
    margin: 2em auto;
    box-shadow:   -15px 0 0 0 rgb(83, 60, 30),
                 15px 0 0 0 rgb(83, 60, 30),
                 0 -15px 0 0 rgb(83, 60, 30),
                 0 15px 0 0 rgb(83, 60, 30);
    padding: 1%;
    background-color: rgb(255, 221, 177);
    opacity: 1;
    transition-delay: 0.3s;
}

HTML 代码 #

<div class="preamble letter hide" id="zen-preamble" role="article">
        <h3 class="center">The Road to Enlightenment</h3>
        <p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
        <p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
        <p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
    </div>

思路指引方向 #

核心逻辑梳理 #

你的需求本质是同一元素（带.letter和.hide类的div）的hover状态下，分两个阶段切换内容：先显示gif，再显示文本。问题出在当前伪元素和div内容的显示控制没有联动起来。

关键思路点 #

1. 伪元素与div内容的显示优先级控制

   • 初始状态：让伪元素（png）覆盖在div内容上方（用position: relative/absolute+z-index实现），同时设置div内容透明度为0
   • hover状态：先切换伪元素为gif，延迟后隐藏伪元素，同时显示div内容

2. 利用CSS过渡与延迟的分层控制

   • 给伪元素添加transition属性，控制gif的显示时长和后续隐藏的延迟
   • 对齐伪元素隐藏与div内容显示的时间线：比如伪元素hover后保持gif显示0.3秒，再开始隐藏；div内容则延迟0.3秒开始显示

3. 修正选择器使用逻辑

   • 无需兄弟选择器，直接通过.letter:hover::before控制伪元素状态，同时通过.letter:hover直接控制当前div（.hide类）的显示状态

4. 状态切换细节处理

   • 伪元素隐藏用opacity: 0配合过渡更平滑，避免直接用content: none导致的生硬切换
   • 调整transition-delay参数，确保伪元素隐藏和div内容显示的动作同步触发

具体探索方向 #

• 给.letter设置position: relative，给.letter::before添加position: absolute，让伪元素覆盖住div内容
• 给.letter:hover::before添加opacity: 0，并设置transition-delay: 0.3s，和div内容的显示延迟匹配
• 将.hide:hover的选择器改为.letter:hover，直接通过父元素hover控制自身显示状态
• 测试不同transition组合，比如transition: opacity 0.2s ease配合延迟，优化切换流畅度

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