当按钮在悬停时显示时，整个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>

任何人都可以帮助我吗？ TIA

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>