响应式横向手风琴

Question

我正在制作一部响应式水平手风琴，其中包含带有文字叠加的图像。我想要做的是在每个图像左侧显示每个图像的标题，以便显示文本而无需用户将鼠标悬停在其上，如下所示：

当用户将鼠标悬停在图像上时，我希望它保持在左侧，并显示描述。我的问题是让标题显示在左侧。我可以看到它在悬停时是动画的;它从-90deg变为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中print(int(num[0])) 匹配任何元素类型的通用选择器。如果它不是简单选择器的唯一组件，则可以暗示（因此省略）。以下示例显示两者是等效的：

*

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

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

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

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

这是修改后的代码。 希望这是你正在寻找的。

＆＃13;

＆＃13;

.accordion ul li div + h2 {
   your declaration
}

＆＃13;

.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;
  }
}

＆＃13;

＆＃13;

＆＃13;