The hover effect currently applies to two elements, but it should be limited to just one element

I'm currently learning CSS and have encountered a problem with the hover effect on a box element. The issue is that even when the mouse is placed under the box (content element), the hover effect still works. I'm wondering why this is happening and if there's a solution within my existing code?

body {
                margin: 0;
                padding: 0;
                font-family: sans-serif;
            }

            .container {
                width: 1200px;
                height: 300px;
                margin: 240px auto;
                position: relative;
            }

            .container .box {
                position: relative;
                width: calc(400px - 30px);
                height: calc(300px - 30px);
                background-color: #000;
                float: left;
                margin: 15px;
                box-sizing: border-box;
                border-radius: 10px
              }

              /* More CSS rules... */

            
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>

<div class="container">  
       <div class="box">
           <div class="icon"><i class="fas fa-search"></i></div>
            <div class="content">
                <h3>Search</h3>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
           </div>
       </div>
       <div class="box">
           <div class="icon"></div>
       </div>
       <div class="box">
           <div class="icon"></div>
       </div>
    </div>

htmlcsshover

Answer №1

When dealing with web development, developer tools become your best ally. By inspecting the element, you may notice that despite not hovering over it, the <div class="content"> div remains visible on the page. To fix this issue, simply change the color of the <p> element to black.

To fully resolve this problem, include the following code snippet in your CSS: Add overflow: hidden to your .box class. This will ensure that the .content div stays concealed until you hover over the .box div.

.container .box {
    position: relative;
    width: calc(400px - 30px);
    height: calc(300px - 30px);
    background-color: #000;
    float: left;
    margin: 15px;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden; /* ADD THIS */
}

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

Symfony - Asterisk displayed on mandatory label causes bug in ChoiceType field

In my Symfony 4 project, I am looking to indicate mandatory fields with an asterisk next to their labels. There are multiple ways to achieve this as mentioned in the documentation: https://symfony.com/doc/4.0/form/form_customization.html#adding-a-required ...

csssymfony

"Utilize Tailwind to effortlessly place a single item at the center

Looking for a way to align a row of items with one item centered in the div and the others positioned on either side while maintaining their original order? Check out this code snippet: <div className="flex mx-auto justify-center items-center" ...

cssreactjstailwind-css

React modal image showing a misaligned image upon clicking

I recently integrated the react-modal-image library into my project to display images in a modal when clicked. However, I encountered an issue where the displayed image is off center with most of it appearing offscreen. I'm unsure what is causing this ...

javascripthtmlcssreactjs

Press the button to use PHP to remove a row from MySQL by its corresponding ID

Hey there, I'm facing an issue with my HTML form. I have a button named "delete" and next to it, there's an input field where the logged-in user is supposed to enter a number corresponding to an ID and then press the delete button to remove the r ...

phphtmlmysql

Utilizing the ngIf Statement with a Repeating Element: A Step-by-Step

I am working with an Angular Material table: (HTML) <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8"> <ng-container matColumnDef="{{column}}" *ngFor="le ...

htmlcssangulartypescriptangular-material

icomoon functions successfully on a localhost environment, however it is currently experiencing difficulties when uploaded to

Here is my folder structure: - index.php - css --> master.css - plugins --> icommon --> style.css In master.css, I am using @import url('../plugins/icomoon/style.css'); The Icomoon fonts are working fine on localhost but not on the ...

htmlcss

Apply the active class to a section in the menu

I am exploring how to dynamically add the "active" class to a specific section of my menu based on which link within that section has been clicked. After successfully implementing the active class functionality for individual links using jQuery, I am confi ...

javascriptjqueryhtmlcssmenu

The art of Positioning Div Elements

Hey there! I'm fairly new to web design and recently created a site with 2 ap divs to position images in my header. Everything looked great on my laptop, but when I viewed it on a 24-inch monitor, the positioning was completely off. Here's the CS ...

htmlcss

"Converting an HTML file into a fully functional website

Here's a beginner question for you. I created an HTML file in Netbeans, incorporating CSS and JavaScript. However, the file remains just a .html file. My goal is to use this file as a webpage on my Joomla website. Can someone guide me through this p ...

htmljoomla

Verify whether the document includes a class that closely matches the provided string using Javascript

I need help identifying elements that include the letters 'ad'. For example: <iframe class="container" /> <!-- Not relevant --> <a class="adp" /> <!-- Relevant --> <a class="adleft" /> ...

javascripthtmlcss

Comparing Inline SVG to CSS Background Sprite

As I work on developing multiple pages for my app (currently utilizing Angular on the front-end), I find myself including numerous logos. In an effort to maintain code readability, I have begun creating directives for each SVG logo by embedding the inline ...

javascripthtmlcssangularjssvg

Is it possible to store multiple keys in HTML local storage?

Is there a way to store multiple keys to local storage without overwriting the previous ones when multiple people take a survey and refresh? Could they be grouped by userID or sorted in any way? $('form').submit(function() { $('input, ...

javascriptjqueryhtmllocal-storage

The functionality of Bootstrap "tabs" and "navbar" seems to be malfunctioning within the electron environment

Bootstrap is being loaded using the following code: <script> let $ = require('jquery') ; </script> <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script> ...

javascriptnode.jshtmlbootstrap-4electron

Attempting to split a heading, however, the word-wrap function seems to be malfunctioning

My recipe panels have photos and titles, but the titles are too long to fit in the designated size. Despite using word-break: break-word, it doesn't seem to be working as intended. This example illustrates my issue: https://i.sstatic.net/HbKuI.png H ...

htmlcss

jQuery: Managing and modifying values for dynamically generated input elements

Hello, I am currently working with the latest version of jQuery and have a table set up where clicking on the "Add" button appends a row of inputs. My goal is to calculate the total price for each particular product based on keyup events (i.e., qty * price ...

javascriptphphtmljqueryajax

Are there any methods for integrating a database file directly into an HTML file? If not, are there alternative approaches I could explore to achieve a similar result?

I have a school project where I need to create a website showcasing my work. I've created a database in Microsoft Access and I'm wondering if there's a way to integrate it into my website using html. The database is simple, just a table, a f ...

html

Repurposing JavaScript objects after clearing their contents

Here's my issue. I'm working with a Javascript object, initialized as var stack = {}. This object is used in my project to store arrays. When the user clicks the add button, an array is added to the object with a specific key that is inputted in ...

javascriptphpjqueryhtmlajax

CSS fails to load on DJango platform

I am currently working with two apps in my project: Home and Header. The HTML code for the Home app can be found in project_folder -> home -> templates -> home -> base_home.html {% extends 'header/base_header.html' %} <!doctype h ...

cssdjangobootstrap-5

What is the best way to ensure that the search box automatically adjusts its position and size regardless of the screen resolution?

I'm currently working on a responsive website project and facing an issue with the absolute positioning of the search bar on the main page, which is crucial for me. Below is the code snippet: <div class="span4"> <form class="well form ...

javascriptjqueryhtmlcss

Transforming CSS shorthand background properties into longhand representation

I have been working on a function to convert shorthand CSS background declarations into longhand. The function I created is functional, but it does not handle cases where the background-color property includes color values like black or yellow. It also doe ...

phphtmlcss