Why does my icon container persistently remain visible, rather than appearing only upon hovering?

Below is the code snippet I'm currently working with:

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

When hovering over the section, a black border is displayed. Additionally, an icon has been inserted within the section-controllers div. I aim to have this entire div visible only upon hovering over the section, mirroring the behavior of the border display.

I've attempted to modify the code based on the guidance provided in: Using only CSS, show div on hover over <a>, but have faced challenges in making it functional. Although Bootstrap 5 has been implemented, its use isn't a determining factor in this scenario.

htmlcsshover

Answer №1

If you want to modify the existing selector (page-section:hover), you can simply add .section-controllers after it, so your new selector will look 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>

Answer №2

Here's a code snippet that demonstrates a simple CSS effect:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

javascriptjquerycssstylesheet

Aligning a single component in the center vertically with the appbar positioned at the top of the screen using Material

As a beginner with material UI, I am facing challenges in centering a component both horizontally and vertically on my screen while including an AppBar for navigation at the top. While I have come across solutions like this example using a grid system, i ...

htmlcssreactjsmaterial-ui

Desynchronization of jQuery

Incorporating a slideshow and a function to modify the appearance of four boxes, the following code is utilized: jQuery(document).ready(function() { jQuery('#fp-slides') .cycle({ fx: 'fade', speed: '2500&a ...

jquerycss

What is the best way to align text and images for list items on the same line?

HTML:- ul { list-style-image: url(https://i.sstatic.net/yGSp1.png); } <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li> <li>Lorem ipsum dolor sit amet, consectetur adipisici ...

htmlcss

Clickable boxes for selecting options (Ajax and JavaScript)

I have a new project that involves creating a checkbox and using ajax and javascript to change its state when clicked. The goal is for the checkbox state to be saved in a php program that generates a .txt file. The state should be 0 when not clicked and 1 ...

javascripthtmlajaxcheckbox

CSS: The grid-column and grid-row properties are malfunctioning

I'd like to create a grid with one column containing multiple rows of text, and the second column having an equal number of input rows. My initial plan was to create a grid where the number of rows equals the number of lines of text, and then define t ...

htmlcsscss-grid

Step-by-step guide on visually comparing two iframes for differences

Scenario : In my project, I am dealing with 2 iframes that contain a significant number of divs and other controls, making both iframes similar in size to complete HTML websites. My goal is to compare these two iframes and identify any differences. Consi ...

javascriptpythonhtmlselenium-webdriveriframe

Utilizing the content of an HTML element within Ruby embedded code - a comprehensive guide

Below is the code snippet in question: <% @groups.each do |group| %> <tr> <td id="groupid"><%= group.id %></td> <td><a href="#dialog" name="modal"><%= group.title %></a></td> </tr> &l ...

javascriptjqueryhtmlruby-on-railsruby

Stop the stream coming from getUserMedia

After successfully channeling the stream from getUserMedia to a <video> element on the HTML page, I am able to view the video in that element. However, I have encountered an issue where if I pause the video using the controls on the video element a ...

javascripthtmlhtml5-videogetusermedia

In Form view in Odoo, the field value appears on the following line when editing

When attempting to edit a value in the form view, I am experiencing an issue where the field's value is being pushed onto the next line. <div class="row"> <label string="Website" for="field_id" class="col- ...

htmlcssbootstrap-4odoo

Using AJAX to create an interactive dropdown menu with changing options

I have been working on creating a dropdown menu using Ajax. When hovering over the navigation bar, the menu successfully triggers the Ajax function to display the dropdown options. The issue arises when attempting to navigate to another page (show_activi ...

javascripthtmlcssajax

Is there a way to display the next/previous buttons separately from the scroller in my jQuery thumbnail scroller implementation?

Is there a method to display the next and previous buttons outside of the scroller frame when using jQuery thumbnail scroller by manos.malihu.gr? I have attempted to modify the button class in CSS to make them more prominent or visible, but unfortunately ...

javascriptjquerycssscroll

Navigating the FormSpree redirect: Tips and tricks

I recently set up my website on Github Pages and wanted to integrate a free contact form from FormSpree. However, I encountered an issue where after submitting the form, it redirected to a different website, which was not ideal. After researching online, I ...

javascripthtmlforms

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

I have successfully developed a Google App Script that links to a Google Sheet serving as a database. The application iterates through each row, and I showcase each column as part of an employee bio page entry. ex. Picture | Name | Title | Phone | Email ...

htmlcssarraysbootstrap-4

What is the best way to compress HTML code within a webpage's source?

I have noticed that my template is filled with empty spaces after previewing the page due to using many tags. Is there a way to make my code more compact, similar to the example below: https://i.sstatic.net/ZBlbg.jpg [...] startsWith",function(a){return ...

htmldjango

Managing multiple sets of data in a structured form similar to an array

How Do I Send Form Data as an Array? Take a look at the code snippet below. I'm having trouble setting the index in product_attribute['index must be here']['key'] <tr v-for="index in attributes"> <td class="text-left ...

javascripthtmlvue.jsvuejs2vue-component

Adaptable positioned picture

I'm trying to figure out how to make a series of positioned images adjust to the window's dimensions. Should the images be relative and the page wrap absolute, or vice versa? I've been experimenting on jsfiddle but can't seem to get it ...

htmlcssimageresponsive-design

What are some ways to utilize .styl stylesheets instead of traditional .css files?

I really hope this isn't a silly question, but I've been searching Google and forums for 30 minutes and can't find anything. I downloaded this npm package (ag-grid) and all their documentation talks about .css files, but the package only ha ...

cssnpmsassag-grid

unable to see the new component in the display

Within my app component class, I am attempting to integrate a new component. I have added the selector of this new component to the main class template. `import {CountryCapitalComponent} from "./app.country"; @Component({ selector: 'app-roo ...

htmlangulartypescript

Highlighting a Table Column with a Radio Button

I am struggling with controlling the highlight of a table using only radio buttons. When I try to change the selector to input:radio, it doesn't work as expected. It seems to only work with the selector provided in my code snippet. $("th").on("clic ...

javascripthtmlcss