html - 为什么我的图标容器总是可见而不是出现在悬停时？

Question

我有以下代码：

.page-section {
    border: 4px solid rgba(0,0,0, 0);
    padding: 10px;
    box-sizing: border-box;
    transition: border 1s ease-out;
}

.page-section:hover {
    border: 4px solid #000000;
    padding: 10px;
    box-sizing: border-box;
    transition: border .5s ease-in;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
    <div class="section-controllers">
        <div class="section-delete">
            <a href="#">
                <svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
                    <path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
                </svg>
            </a>
        </div>
    </div>

    <div class="container">
    
        <div class="row row-control">
        
            <div class="col-lg-6 col-control">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
            </div>
            <div class="col-lg-6 col-control">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
            </div>
        
        </div>
    
    </div>

</section>

因此，当我将鼠标悬停在该部分上时，会出现黑色边框。我还添加了一个包含在section-controllersdiv 中的图标。我希望整个 div 仅在该部分悬停时出现，就像边框的显示方式一样。

我一直在尝试玩这个：仅使用 CSS，将鼠标悬停在 <a> 上时显示 div， 但我无法让它工作。我使用过 Bootstrap 5，但这并不重要。

标签： htmlcsshover

Answer 1

您可以使用已在使用的相同选择器 ( page-section:hover)，只需在其后添加 .section-controllers，这样您就可以像.page-section:hover .section-controllers {}.

.page-section {
    border: 4px solid rgba(0,0,0, 0);
    padding: 10px;
    box-sizing: border-box;
    transition: border 1s ease-out;
}

.page-section:hover {
    border: 4px solid #000000;
    padding: 10px;
    box-sizing: border-box;
    transition: border .5s ease-in;
}

.section-controllers {
    display: none;
    position: absolute;
    top: 15px;
    left: 15px;
}

.page-section:hover .section-controllers {
    display: block;
}

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
    <div class="section-controllers">
        <div class="section-delete">
            <a href="#">
                <svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
                    <path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
                </svg>
            </a>
        </div>
    </div>

    <div class="container">
    
        <div class="row row-control">
        
            <div class="col-lg-6 col-control">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
            </div>
            <div class="col-lg-6 col-control">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
            </div>
        
        </div>
    
    </div>

</section>