为啥我的图标容器总是可见而不是出现在悬停时？ [复制]

Posted 2023-05-08

【中文标题】为啥我的图标容器总是可见而不是出现在悬停时？ [复制]

【英文标题】：Why is my icon container always visible instead of appearing on hover? [duplicate]为什么我的图标容器总是可见而不是出现在悬停时？ [复制]

【发布时间】：2020-11-18 00:03:09

【问题描述】：

我有以下代码：

.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   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-controllers div 中的图标。我希望整个 div 仅在该部分悬停时出现，就像边框的显示方式一样。

我一直在尝试玩这个：Using only CSS, show div on hover over <a> 但我无法让它工作。我使用过 Bootstrap 5，但在这里并不重要。

【参考方案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   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>

【讨论】：

谢谢，这行得通。知道如何做到这一点，以便悬停不会下推该部分的内容吗？

@PapT 你可以使用position: absolute。以更新我的解决方案为例。

【参考方案2】：

你可以这样做。

.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;

.page-section .section-delete
   display:none;

.page-section:hover .section-delete
   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   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>