响应式水平手风琴
问题描述：
我正在研究具有带文字叠加图像的响应式水平手风琴。我想要做的是对每个图像的左侧每个图像显示的标题，使文本将无需用户不必在它悬停，像这样显示： 响应式水平手风琴
当用户悬停在图片上，我希望它留在左侧，并显示说明。我的问题是让标题显示在左侧。我可以看到它在悬停时动画;它会从-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>
答
首先，让我一个普遍的选择器的使用说明，其在CSS中是*匹配任何元素类型。如果它不是简单选择器的唯一组件，则可以隐含（并因此省略）。下面是上例中的是相同的：
*.module {
display: block;
}
.module {
display: block;
}
在我看来，不建议这样做，除非你想重置所有元素，使用通用的CSS。
我已经看到你的代码，并审查并发现在后代显示方法有点复杂的编码。例如，您可以像我的代码中那样为您的标题元素使用相邻的兄弟选择器。
.accordion ul li div + h2 {
your declaration
}
我已删除h2元素这是它迫使与悬停情况下进行改造定位元素的一个孩子。我已经用span元素包装了h2元素，并将它的方向转换为垂直位置，从底部和左侧进行负向定位，就像旋转元素时的角度一样，元素的边缘也旋转留下间隙，因此我们需要修复与负面/位置边际。
这里是修改后的代码。 希望这是你正在寻找。
.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>
绝对是我所期待的。现在唯一遇到的问题是，当标题不止一个单词时，它会在它自己的行上显示每个单词。我该如何适应？ [code pen]（http://codepen.io/xxdash/pen/NjvVjL） – xxdash
我已经更新了代码。希望这对你很好。 – Maqk
非常感谢您的协助！ – xxdash