html - 悬停边框位置上的CSS卡
问题描述
当卡片悬停时,我得到了设置卡片边框的动画效果。但万一卡片内容超出,我必须将卡片overflow
设置为自动以使卡片可滚动。但这样做时,当鼠标悬停在卡片底部时,会采用卡片的初始高度并仅显示之前的高度。我想我需要改变一些东西,.card:hover::before
但似乎无法弄清楚。看一下我在下面附上的图片,以便更好地理解。看看我的小提琴https://jsfiddle.net/xd1yr0je/
.card {
background-color: #222831;
border-radius: 5px;
display: flex;
height: 40%;
flex-direction: column;
align-items: center;
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.7);
color: #fff;
margin: 0 7px;
width: 31%;
opacity: 0.9;
box-shadow: inset 0 0 0 4px #58cdd1;
-webkit-transition: color 0.25s 0.0833333333s;
transition: color 0.25s 0.0833333333s;
position: relative;
overflow-y: auto;
}
.card::-webkit-scrollbar {
display: none;
}
.card::before,
.card::after {
border: 0 solid transparent;
box-sizing: border-box;
content: "";
pointer-events: none;
position: absolute;
width: 0;
height: 0;
bottom: 0;
right: 0;
}
.card::before {
border-bottom-width: 3px;
border-left-width: 3px;
}
.card::after {
border-top-width: 3px;
border-right-width: 3px;
}
.card:hover {
color: #ffe593;
}
.card:hover::before,
.card:hover::after {
border-color: #eb196e;
-webkit-transition: border-color 0s, width 0.25s, height 0.25s;
transition: border-color 0s, width 0.25s, height 0.25s;
width: 100%;
height: 100%;
}
.card:hover::before {
-webkit-transition-delay: 0s, 0s, 0.25s;
transition-delay: 0s, 0s, 0.25s;
}
.card:hover::after {
-webkit-transition-delay: 0s, 0.25s, 0s;
transition-delay: 0s, 0.25s, 0s;
}
解决方案
解决这个问题的一种方法是在.card
. 让我们称之为.inner-card
。添加overflow-y:auto;
到.inner-card
并删除该div中的滚动条。那应该可以解决您的问题。
.container {
height: 100vh;
width: 100vw;
}
.card{
height: 50%;
width: 31%;
background-color: #222831;
border-radius: 5px; display: flex;
flex-direction: column;
align-items: center;
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.7);
color: #fff;
margin: 0 7px;
opacity: 0.9;
box-shadow: inset 0 0 0 4px #58cdd1;
-webkit-transition: color 0.25s 0.0833333333s;
transition: color 0.25s 0.0833333333s;
position: relative;
}
.card-inner {
overflow-y: auto;
}
.card-inner::-webkit-scrollbar {
display: none;
}
.card::before,
.card::after {
border: 0 solid transparent;
box-sizing: border-box;
content: "";
pointer-events: none;
position: absolute;
width: 0;
height: 0;
bottom: 0;
right: 0;
}
.card::before {
border-bottom-width: 3px;
border-left-width: 3px;
}
.card::after {
border-top-width: 3px;
border-right-width: 3px;
}
.card:hover::before,
.card:hover::after {
border-color: #eb196e;
-webkit-transition: border-color 0s, width 0.25s, height 0.25s;
transition: border-color 0s, width 0.25s, height 0.25s;
width: 100%;
height: 100%;
}
.card:hover::before {
-webkit-transition-delay: 0s, 0s, 0.25s;
transition-delay: 0s, 0s, 0.25s;
}
.card:hover::after {
-webkit-transition-delay: 0s, 0.25s, 0s;
transition-delay: 0s, 0.25s, 0s;
}
.card:hover {
color: #ffe593;
transform: scale(1.05);
opacity: 1;
}
.card h2 {
margin-top: 20px;
text-shadow: 5px 10px 7px #eb196e;
font-weight: 600;
font-size: 20px;
text-align:center;
}
.card__container {
display: flex;
flex-direction: column;
border-bottom: 1px solid gray;
padding: 5%;
}
.card__container__details {
font-weight: 400;
font-size: 14px;
margin: 5px 6px;
}
.card__tasks {
width: 80%;
}
.task__list {
display: flex;
flex-direction: column;
margin: 10px 0;
border-bottom: 1px solid gray;
}
.main__task {
display: flex;
margin: 7px 0;
}
/* Checkbox Style */
.main__task label {
position: relative;
margin: 5px 0;
color: #fff;
font-size: 16px;
font-weight: 550;
cursor: pointer;
}
.main__task input[type="checkbox"] {
-webkit-appearance: none;
}
.main__task i {
position: absolute;
top: 0;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50px;
background: #0b87a6;
border: 2px solid #fff;
}
.main__task input[type="checkbox"]:checked ~ i {
top: 1px;
border-top: none;
border-right: none;
height: 15px;
width: 25px;
transform: rotate(-45deg);
}
.main__task span {
position: relative;
left: 30px;
transition: 0.5s;
}
.main__task span:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.main__task input[type="checkbox"]:checked ~ span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.main__task input[type="checkbox"]:checked ~ span {
color: #eb196e;
}
.sub__task {
display: flex;
}
.sub__task label {
position: relative;
margin: 10px 10px 0 25px;
color: #fff;
font-size: 14px;
font-weight: 450;
cursor: pointer;
}
.sub__task input[type="checkbox"] {
-webkit-appearance: none;
}
.sub__task i {
position: absolute;
top: 0;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50px;
background: #eb196e;
border: 2px solid #fff;
}
.sub__task input[type="checkbox"]:checked ~ i {
top: 1px;
border-top: none;
border-right: none;
height: 10px;
width: 20px;
transform: rotate(-45deg);
}
.sub__task span {
position: relative;
left: 25px;
transition: 0.5s;
}
.sub__task span:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.sub__task input[type="checkbox"]:checked ~ span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.sub__task input[type="checkbox"]:checked ~ span {
color: #0b87a6;
}
<div class="container">
<div class="card">
<div class="card-inner">
<h2>Web Development</h2>
<div class="card__container">
<div class="card__container__details">
Created By: Tridib Chatterjee on Oct 14, 2020, 2:18:59 AM
</div>
<div class="card__container__details">
Modified By: Tridib Chatterjee on Oct 14, 2020, 2:18:59 AM
</div>
</div>
<div class="card__tasks">
<div class="task__list">
<div class="main__task"><label><input type="checkbox" name=""><i></i><span>Angular</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>ngIf</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>ngFor</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>Components</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>Directives</span></label>
</div>
</div>
</div>
<div class="card__tasks">
<div class="task__list">
<div class="main__task"><label><input type="checkbox" name=""><i></i><span>Angular</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>ngIf</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>ngFor</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>Components</span></label>
</div>
<div class="sub__task">
<label><input type="checkbox" name=""><i></i><span>Directives</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 如何将数组对象格式化为新对象
- ios - Firestore - 获取文档的子对象而不是 FIRDocumentReference
- spring - 如何配置 Spring Cloud StreamBridge 来生产 Avro?
- caching - 浏览器不缓存 AJAX GET 请求
- raspberry-pi - 如何用我的手机 (android) 控制乐高技术红外接收器?
- javascript - 单击按钮时在for循环中从数组中获取值
- r - 在 ggplot 中使用 percent(accuracy = 3L) 时,百分比不会四舍五入
- javascript - D3.js 中的 if else 语句用于自定义色标
- input - XY 图形的用户输入范围
- r - 调整以使条件面板仅在加载正确的文件时出现