响应式水平手风琴

Question

我正在开发一种响应式水平手风琴，它具有带有文本叠加层的图像。我想要做的是让每张图片的标题显示在每张图片的左侧，这样用户无需将鼠标悬停在上面就可以显示文本，如下所示：

当用户将鼠标悬停在图片上时，我希望它停留在左侧，并显示说明。我的问题是让标题显示在左侧。我可以看到它在悬停时是动画的；它从 -90 度变为 0。

CSS/HTML:

.accordion {
  width: 100%;
  max-width: 2100px;
  height: 350px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 350px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div a h2 {
  display: block;
  overflow: auto;
  -ms-transform: rotate(270deg); /* IE 9 */
  -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
  transform: rotate(270deg);
  background-color: rgba(255,255,255,.5);
  width: 100%;
}

.accordion ul li div a {
  display: block;
  height: 350px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #000;
  text-decoration: none;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  position: relative;
  z-index: 5;
  overflow: fill;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
  background-color: rgba(255,255,255,.5);
  padding: 5px;
}

.accordion ul li div a h2 {
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 60px;
}

.accordion ul li div a p {
  top: 80px;
  font-size: 14px;
  height: 100px;
}

.accordion ul li:nth-child(1) { background-image: url("http://placehold.it/1350x350"); }

.accordion ul li:nth-child(2) { background-image: url("http://placehold.it/1350x350"); }

.accordion ul li:nth-child(3) { background-image: url("http://placehold.it/1350x350"); }

.accordion ul li:nth-child(4) { background-image: url("http://placehold.it/1350x350"); }
.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
@media screen and (max-width: 600px) {
  
  body { margin: 0; }
  
  .accordion { height: auto; }
  
  .accordion ul li,
  .accordion ul li:hover,
  .accordion ul:hover li,
  .accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
}

<div class="accordion w3-center">
  <ul>
    <li>
      <div> <a href="#">
        <h2>HEADER</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
        <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
      </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>HEADER</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
        <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
      </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>HEADER</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
        <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
      </a> </div>
    </li>
    <li>
      <div> <a href="#">
        <h2>HEADER</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus, a scelerisque purus accumsan sit amet.<br>
        <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
      </a> </div>
    </li>
  </ul>
</div>

码笔： http://codepen.io/xxdash/pen/pPrwBw

Answer 1

首先，让我解释一下 CSS 中 * 匹配任何元素类型的通用选择器的使用。如果它不是简单选择器的唯一组件，则可以隐含（因此省略）。下面的例子显示两者是等价的：

*.module {
  display: block;
}
.module {
  display: block;
}

在我看来，不建议在CSS中使用Universal，除非你想重置所有元素。

我看过您的代码并进行了审查，发现后代中显示方法的编码有点复杂。例如，您可以像我的代码中那样为您的标题元素使用相邻的兄弟选择器。

.accordion ul li div + h2 {
   your declaration
}

我删除了 h2 元素，它是锚元素的 child，它强制使用悬停情况进行转换。我用 span 元素包裹了 h2 元素，并将其方向转换为垂直位置，从底部和左侧进行负定位，当以一定角度旋转元素时，元素的边缘也旋转留下间隙，因此我们需要修复它有 negative/position 个页边距。

这是修改后的代码。希望这就是您要找的。

.accordion {
  width: 100%;
  max-width: 1000px;
  height: 300px;
  margin: 0 auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  position: relative;
}

.accordion ul li div span {
    background-color: rgba(255, 0, 0, .5);
    font-size: 20px;
    line-height: 34px;
    font-weight: 300;
    position: absolute;
    display: block;
    width: 300px;
    height: 30px;
    -webkit-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
    -moz-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
    -ms-transform: rotate(-90deg) translateX(-50%) translateY(-150px);
    transform: rotate(-90deg) translateX(-50%) translateY(-150px);
    left: 15px;
    top: -15px;
    white-space: nowrap;
    z-index: 10000;
    cursor: default !important;
}

.accordion h2 {
  font-size: 20px;
   margin: 0;
}

.accordion ul li div a {
  display: block;
  height: 300px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #000;
  text-decoration: none;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  position: relative;
  z-index: 5;
  overflow: fill;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
  background-color: rgba(255, 255, 255, .5);
  padding: 0px;
}

.accordion ul li div a p {
  top: 0;
  font-size: 14px;
}

.accordion ul li:nth-child(1) {
  background-image: url("http://placehold.it/1350x350");
}

.accordion ul li:nth-child(2) {
  background-image: url("http://placehold.it/1350x350");
}

.accordion ul li:nth-child(3) {
  background-image: url("http://placehold.it/1350x350");
}

.accordion ul li:nth-child(4) {
  background-image: url("http://placehold.it/1350x350");
}

.accordion ul:hover li {
  width: 8%;
}

.accordion ul:hover li:hover {
  width: 60%;
}

.accordion ul:hover li:hover a {
  background: rgba(0, 0, 0, 0.4);
}

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

@media screen and (max-width: 600px) {
  body {
    margin: 0;
  }
  .accordion ul li,
  .accordion ul li:hover,
  .accordion ul:hover li,
  .accordion ul:hover li:hover {
    position: relative;
    display: table;
    table-layout: fixed;
    width: 100%;
    -webkit-transition: none;
    transition: none;
  }
}

<div class="accordion w3-center">
  <ul>
    <li>
      <div><span><h2>HEADER With Longer Text</h2></span>
        <a href="#">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
            libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
            a scelerisque purus accumsan sit amet.<br>
            <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
        </a>
      </div>
    </li>
    <li>
      <div><span><h2>HEADER with longer text</h2></span>
        <a href="#">

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
            libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
            a scelerisque purus accumsan sit amet.<br>
            <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
        </a>
      </div>
    </li>
    <li>
      <div><span><h2>HEADER</h2></span>
        <a href="#">

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
            libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
            a scelerisque purus accumsan sit amet.<br>
            <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
        </a>
      </div>
    </li>
    <li>
      <div><span><h2>HEADER</h2></span>
        <a href="#">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut eros tortor. Proin tellus enim, cursus sed blandit sit amet, accumsan ac sapien. Nunc ornare dapibus vestibulum. Nunc vulputate luctus magna quis lobortis. Praesent nec commodo
            libero. Nunc auctor, metus non tincidunt faucibus, tortor eros lacinia neque, ac bibendum urna felis quis nisl. Duis imperdiet odio non fermentum pharetra. Aliquam erat volutpat. Pellentesque ac faucibus diam. Phasellus porttitor tortor lacus,
            a scelerisque purus accumsan sit amet.<br>
            <button class="w3-button w3-green" style="width: 25%; margin-top: 15px;">BUTTON NAME</button></p>
        </a>
      </div>
    </li>
  </ul>
</div>

响应式水平手风琴

Responsive Horizontal Accordion

html

css

accordion

responsive