如何在 CSS 中使用 box-shadows 创建手风琴悬停效果？

介绍

在网站中使用手风琴菜单是一种非常流行的设计趋势。手风琴悬停效果在用户悬停或点击菜单时可以展开或收缩它们。这样可以节省页面空间，并使页面布局更加灵活和吸引人。

要实现手风琴悬停效果，我们可以使用 CSS 中 box-shadow 属性。box-shadow 属性可以创建元素的投影效果，这可以用于创建一些很酷的效果，例如手风琴菜单。

步骤

1. 建立 HTML 文件，其中包含手风琴菜单的所有标签和内容。

<div class="accordion">
  <div class="accordion-item">
    <h2 class="accordion-header">Item 1</h2>
    <div class="accordion-content">
      <p>Item 1 content...</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">Item 2</h2>
    <div class="accordion-content">
      <p>Item 2 content...</p>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">Item 3</h2>
    <div class="accordion-content">
      <p>Item 3 content...</p>
    </div>
  </div>
</div>

2. 为手风琴菜单添加 CSS 样式，包括 box-shadow 属性。

/* 设置手风琴根元素 */
.accordion {
  display: flex;
  flex-direction: column;
}

/* 设置手风琴项 */
.accordion-item {
  background-color: #f5f5f5;
  border-radius: 5px;
  margin: 5px;
}

/* 设置手风琴标题 */
.accordion-header {
  background-color: #dcdcdc;
  color: #333;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
  position: relative;
}

/* 设置手风琴内容 */
.accordion-content {
  overflow: hidden;
  padding: 10px;
  transition: max-height 0.3s ease-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

3. 使用 JavaScript 或 jQuery 为手风琴菜单添加交互效果，例如点击收缩和展开手风琴菜单项。

var accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(function(accordionHeader) {
  accordionHeader.addEventListener('click', function() {
    var accordionContent = this.nextElementSibling;
    if (accordionContent.style.maxHeight) {
      accordionContent.style.maxHeight = null;
    } else {
      accordionContent.style.maxHeight = accordionContent.scrollHeight + "px";
    }
  });
});

结论

通过使用 box-shadow 属性，我们可以轻松地创建手风琴悬停效果，并为网站的用户体验带来一些额外的互动性。为了实现这一目标，我们需要使用 HTML、CSS 和 JavaScript 技术。