时间戳

首页 > 解决方案 > Div 收缩和增长

html - Div 收缩和增长

问题描述

因此，在我的 HTML 中，我希望当您将鼠标悬停在其上时，choice-div div 会增长 10 像素。我也不希望 div 的位置不改变，也不希望改变它的中心。

.choice {
    width: 100%;
    height: 80px;
    text-align: left;
}

div.choice-div {
    border-radius: 10px;
}

div.choice-div:hover {
    width: 105%;
    height: 100px;
}

.choice-text {
    font-size: 30px;
    vertical-align: middle;
}

.icon {
    vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>


<div class="problem container">
    <h1>What is 1 + 1?</h1>
    <div class="list-group-item bg-light mt-3 choice-div">
        <span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
    </div>
    <div class="list-group-item bg-light mt-3 choice-div">
        <span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
    </div>
    <div class="list-group-item bg-light mt-3 choice-div">
        <span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
    </div>
</div>

知道我该怎么做吗？

标签： htmlcss

解决方案

使用“比例”css 属性

.choice {
    width: 100%;
    height: 80px;
    text-align: left;
}

div.choice-div {
    border-radius: 10px;
}

div.choice-div:hover {
    transform: scale(1.1);
}

.choice-text {
    font-size: 30px;
    vertical-align: middle;
}

.icon {
    vertical-align: middle;
}
<--Bootsrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/bc33a16514.js" crossorigin="anonymous"></script>


<div class="problem container">
    <h1>What is 1 + 1?</h1>
    <div class="list-group-item bg-light mt-3 choice-div">
        <span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">0</span></span>
    </div>
    <div class="list-group-item bg-light mt-3 choice-div">
        <span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">2</span></span>
    </div>
    <div class="list-group-item bg-light mt-3 choice-div">
        <span class="choice"><span class="icon"><i class="fas fa-angle-right fa-3x"></i></span><span class="choice-text ml-3 align-center">3</span></span>
    </div>
</div>

推荐阅读