html - 悬停时显示按钮时整个 div 向上移动

Question

我有一个 div。将鼠标悬停在上面，我会显示一个按钮。但是当我将鼠标悬停在它上面时，整个 div 都在向上移动一点点。我不知道为什么它会移动它应该在显示按钮时停留在同一个地方。这是我的代码:

.singleItem {
    display: inline-block;
    width: 19.80%;
    background-color: #eeeeee;
    text-align: center;
    min-height: 200px;
}
.singleItem img {
    width: 145px !important;
    height: auto;
    margin-top: 20px;
}
.singleItem p {
    margin: 0;
}
.singleItem:hover {
    background-color: #ff6622;
    cursor: pointer;
}
.singleItem button {
    display: none;
}
.singleItem:hover button {
    display: block;
    background-color: #cc4411;
    border: unset;
    width: 100%;
    padding: 20px 0;
    color: #fff;
    cursor: pointer;
}

<div class="featureProductItems">
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/iphone.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
</div>

有人可以帮我吗？时间差

Answer 1

你可以试试这个

.singleItem {
    display: inline-block;
    width: 19.80%;
    background-color: #eeeeee;
    text-align: center;
    min-height: 200px;
}
.singleItem img {
    width: 145px !important;
    height: auto;
    margin-top: 20px;
}
.singleItem p {
    margin: 0;
}
.singleItem:hover {
    background-color: #ff6622;
    cursor: pointer;
}
.singleItem button {
    opacity:0;
    background-color: #cc4411;
    border: unset;
    width: 100%;
    padding: 20px 0;
    color: #fff;
    cursor: pointer;
}
.singleItem:hover button {
    opacity:1;  
}

<div class="featureProductItems">
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/iphone.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
    <div class="singleItem">
        <img src="assets/img/samsung-galaxy-tab-10.1.jpg">
        <p>Samsung galaxy tab 10.1</p><p>৳65,000.00</p>
        <button type="button">Details</button>
    </div>
</div>