Why is my icon container always visible instead of appearing on hover?

Question

I have the following code:

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

So when I hover over the section a black border appears. I also added an icon that is contained inside the section-controllers div. I want this whole div to appear only when the section is hovered over, just like how the border appears.

I've been trying to play with this: Using only CSS, show div on hover over <a> but I couldn't get it to work. I've used Bootstrap 5 but it doesn't really matter here.

Jax-p · Accepted Answer · 2020-07-28T15:18:25.367

You can use same selector (page-section:hover) which you are already using just add .section-controllers after it so you can use it like .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>

Thanks, this works. Any idea how to do it so the hover won't push down the content of the section? — PapT, Jul 28 '20 at 15:12
@PapT You can use `position: absolute`. Updated my solution as an example. — Jax-p, Jul 28 '20 at 15:18

score 0 · Answer 2 · answered Jul 28 '20 at 14:08

You can do something like this.

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

Why is my icon container always visible instead of appearing on hover?

2 Answers2