适配RTL布局：翻转Contact Us悬停展开功能区

核心思路 #

通过CSS的属性选择器针对dir="rtl"的容器单独设置样式，实现位置、展开方向、内部元素排列的翻转效果，不影响原有LTR布局的功能。

完整代码示例 #

HTML结构

<!-- 可根据实际需求切换dir属性为ltr/rtl -->
<div class="contact-container" dir="rtl">
  <div class="contact-panel">
    <span class="contact-text">Contact Us</span>
    <svg class="contact-icon" viewBox="0 0 24 24" width="20" height="20">
      <path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    </svg>
  </div>
</div>

CSS样式

/* LTR布局默认样式（右侧定位，向左展开） */
.contact-container {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.contact-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #007bff;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-panel:hover {
  padding-right: 40px; /* 向左展开，增加右侧内边距 */
}

/* RTL布局适配（左侧定位，向右展开） */
.contact-container[dir="rtl"] {
  right: auto;
  left: 0; /* 切换到左侧定位 */
}

.contact-container[dir="rtl"] .contact-panel {
  border-radius: 0 8px 8px 0; /* 翻转圆角方向 */
  flex-direction: row-reverse; /* 文本居左、图标居右 */
}

.contact-container[dir="rtl"] .contact-panel:hover {
  padding-right: 20px;
  padding-left: 40px; /* 向右展开，增加左侧内边距 */
}

关键适配点说明 #

• 定位翻转：通过right: auto和left: 0将面板从右侧移到左侧
• 内部元素排列：flex-direction: row-reverse直接翻转文本和图标的顺序，无需调整HTML结构
• 展开方向：hover时调整对应方向的内边距，实现平滑的展开动画
• 样式隔离：用[dir="rtl"]选择器确保样式只作用于RTL布局的容器，不干扰LTR模式

如果你的现有代码是通过transform实现展开位移（比如transform: translateX(-20px)），只需在RTL适配中改为transform: translateX(20px)即可。

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