css - 将鼠标悬停在整个正面卡片上,而不仅仅是按钮上
问题描述
当悬停在整个正面卡片上而不只是按钮上时,如何使卡片进行转换,我尝试在正面 div 上添加 ID 和类,但卡片只是自动转换。https://jsfiddle.net/ecbumaw9/
.more {
display: none;
}
.more:checked ~ .content {
transform: rotateY(180deg);
}
解决方案
添加:hover
到.card
班级并引用孩子。它应该工作。
修改你的CSS如下:
.more:checked ~ .content, .card:hover .content {
transform: rotateY(180deg);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 320px;
height: 240px;
margin: 1em;
/*perspective: 1500px;*/
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more {
display: none;
}
.more:checked~.content,
.card:hover .content {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.3em;
transform: translateZ(80px) scale(0.94);
}
.back .inner {
padding: 1em !important;
background-color: #fff;
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background: linear-gradient(40deg, rgba(67, 138, 243, 0.7), rgba(255, 242, 166, 0.7));
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #151515;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
text-align: center;
}
.front .rating {
grid-row: 3;
color: #ffe234;
font-size: 14px;
display: flex;
flex-flow: row nowrap;
}
.front .rating i {
margin: 0 1px;
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #a1e8b9;
}
.back .inner {
grid-template-rows: 1fr 1fr 1fr 1fr 14fr 1fr 1fr;
grid-template-columns: repeat(4, auto);
grid-column-gap: 0.8em;
justify-items: inherit;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #696969;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
/*content: '';*/
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 1em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.70em;
border-radius: 5px;
font-weight: 600;
line-height: 1em;
overflow: auto;
color: #000;
padding-right: 10px;
position: relative;
}
.back .description ul {
list-style: none;
padding: 0;
margin: 0 auto;
text-align: left;
}
.back .description li {
padding: 6px;
}
.back .description span {
margin-right: 10px;
}
.back .description p {
padding: 10px 5px;
}
.draw-border {
box-shadow: inset 0 0 0 2px #a1e8b9;
transition: color 0.25s 0.0833333333s;
position: relative;
width: 100%;
}
.draw-border::before,
.draw-border::after {
border: 0 solid transparent;
box-sizing: border-box;
content: '';
pointer-events: none;
position: absolute;
width: 0;
height: 0;
bottom: 0;
right: 0;
}
.draw-border::before {
border-bottom-width: 2px;
border-left-width: 2px;
}
.draw-border::after {
border-top-width: 2px;
border-right-width: 2px;
}
.draw-border:hover {
color: #696969;
}
.draw-border:hover::before,
.draw-border:hover::after {
border-color: #696969;
transition: border-color 0s, width 0.25s, height 0.25s;
width: 100%;
height: 100%;
}
.draw-border:hover::before {
transition-delay: 0s, 0s, 0.25s;
}
.draw-border:hover::after {
transition-delay: 0s, 0.25s, 0s;
}
.btn {
background: none;
border: none;
cursor: pointer;
line-height: 1;
letter-spacing: 0.05rem;
margin: 5px;
}
.btn:focus {
outline: 2px dotted #55d7dc;
}
.back .location,
.back .price {
font-weight: 600;
color: #696969;
grid-row: 1;
font-size: 0.86em;
}
.back .location {
grid-column: 1/3;
justify-self: left;
}
.back .price {
grid-column: 3/-1;
justify-self: right;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 3em;
line-height: 2.9em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #696969;
}
.button.return {
line-height: 1.7em;
color: #696969;
border-color: #696969;
text-shadow: none;
height: 2em !important;
}
.button.return:hover {
background-color: #696969;
color: #fff;
box-shadow: none;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #707070;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 5px solid #a1e8b9;
}
.card {
width: 820px !important;
height: 440px !important;
margin: 1em !important;
}
.back .description {
font-size: 16px;
}
.back .description li {
margin: 10px;
font-weight: 400;
padding: 16px;
}
.back .info span {
font-size: 1.8em;
font-weight: 700;
}
.back .location,
.back .price {
font-size: 1.5em;
}
::-webkit-scrollbar {
width: 10px;
}
.draw-border {
width: 99%;
}
.draw-border:hover {
color: #696969;
}
/* Styles */
}
<div class="wrapper">
<div class="card">
<input type="checkbox" id="card1" class="more" aria-hidden="true">
<div class="content">
<div class="front" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Chicago_Skyline_%2815240030464%29.jpg/800px-Chicago_Skyline_%2815240030464%29.jpg')">
<div class="inner">
<h2>Chicago Events For A Year Ahead</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<label for="card1" class="button" aria-hidden="true">
Check Events
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
<!-- <i class="fa fa-calendar"></i> -->
<span>Month</span>
<div class="icon">
</div>
</div>
<div class="info">
<span>Event Type</span>
<div class="icon">
<!-- <i class="fa fa-door-open"></i> -->
</div>
</div>
<div class="info">
<!-- <span>Event</span> -->
<div class="icon">
<!-- <i class="fa fa-bed"></i>
-->
</div>
</div>
<div class="description">
<ul>
<li class="btn draw-border"> <span>Sep</span> Fall Whiskey </li>
<li class="btn draw-border"> <span>Oct</span> Halloween Bar Crawl Fri & Sat </li>
<li class="btn draw-border"> <span>Dec</span> NYE Bar Crawl </li>
<li class="btn draw-border"> <span>Dec</span> NYE Yacht </li>
<li class="btn draw-border"> <span>Jan</span> Winter Whiskey </li>
<li class="btn draw-border"> <span>Feb</span> Winter Tequila </li>
<li class="btn draw-border"> <span>Mar</span> St Patrick's Bar Crawl </li>
<li class="btn draw-border"> <span>Jun</span> Summer Whiskey </li>
<li class="btn draw-border"> <span>Jul</span> Summer Tequila </li>
<li class="btn draw-border"> <span>Aug</span> Air Show Yacht Party </li>
</ul>
</div>
<div class="location">Chicago Events </div>
<div class="price">2019-2020</div>
<label for="card1" class="button return" aria-hidden="true">
<i class="fa fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
推荐阅读
- python - Tkinter 停止程序执行按钮
- google-data-studio - 如何在谷歌数据工作室计算字段中使用日期 = 值?
- c# - 布尔 NullReferenceException
- python - subprocess.check_call:命令'['git','clone']'返回非零退出状态127
- .net - 如何在 EF Core 中有效地为可翻译属性建模?
- json - 将 JSON 转换为节点和链接?
- c# - StackTrace 中未显示行号。我似乎找不到发生错误的行号
- visual-studio-code - VSCode 市场未加载
- javascript - Lazysizes 的问题(仅限动态 img)
- testing - 如何从 JMeter 中的多个样本集中随机运行单个样本