请求为WordPress Divi主题代码块实现自定义悬停缩放文本效果

首先，在Divi里添加自定义CSS有几种便捷方式：如果是针对单个模块，直接用模块的自定义CSS；如果要全局生效，就放到Divi主题选项的通用设置 > 自定义CSS里。下面是适配你需求的代码方案，你可以按需调整参数做出差异化效果：

基础文本样式（对齐参考代码） #

先搭建文本的基础外观，和你提供的参考样式匹配：

/* 替换成你的模块ID/类名，比如#your-custom-title h3 */
#mendo-happy-healthy-header h3 {
    font-size: 70px;
    color: #4bb3e6;
    font-family: 'lulo_cleanone_bold';
    letter-spacing: -8px;
    line-height: 100px;
    /* 加过渡动画，让悬停效果更顺滑 */
    transition: all 0.3s ease;
    /* 设定缩放原点，避免偏移 */
    transform-origin: left center;
}

注意：'lulo_cleanone_bold'字体需要确保已经在你的站点加载（比如通过主题字体设置或自定义字体插件），否则会自动 fallback 到系统默认字体。

悬停缩放核心效果 #

接下来添加悬停时的缩放和样式变化，你可以修改缩放比例、颜色等参数做出独特效果：

#mendo-happy-healthy-header h3:hover {
    /* 缩放比例，1.1代表放大10%，可自行调整 */
    transform: scale(1.1);
    /* 悬停时的颜色变化，可选 */
    color: #3a94c2;
    /* 可选：加轻微阴影增强层次感 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

移动端适配（可选） #

如果需要在小屏幕上优化体验，添加媒体查询调整参数：

@media (max-width: 768px) {
    #mendo-happy-healthy-header h3 {
        font-size: 40px;
        line-height: 60px;
        letter-spacing: -4px;
    }
    #mendo-happy-healthy-header h3:hover {
        transform: scale(1.05); /* 移动端缩放幅度小一点更友好 */
    }
}

Divi中应用步骤 #

1. 打开Divi编辑器，找到目标文本/标题模块
2. 进入模块的高级 > CSS ID & Classes，在CSS ID栏填写mendo-happy-healthy-header（或自定义你的ID）
3. 到Divi主题选项的通用设置 > 自定义CSS，粘贴上述代码后保存即可。如果只需要特定页面生效，就把代码放到页面的Divi页面设置 > 自定义CSS里。

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