"Implement a CSS hover effect that targets the child elements within a div, rather than

Looking to experiment with a new product card layout and encountering an issue with the box shadow effect. When hovering over the product card, the hover function only affects the child elements of the div Product-Card hov instead of the actual div itself. Any suggestions on how to resolve this? Thank you for your assistance.

.Product-Card{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 8px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.hov{
  margin: 0 4px 16px;
  border-radius: 4px;
}

.hov :hover{
  box-shadow: 0 4px 12px 0 rgb(44 44 45 / 7%), 0 0 20px 0 rgb(44 44 45 / 7%);
}
<div class="Product-Card hov">
  <div class="Item-Layout">
     <div class="img-box">
        <img src="1.jpg">
     </div>
     <div class="content">
        <div class="product-name">
           <p> Testing <p>
        </div>
        <div class="Price">
           <p>$10.40<p>
        </div>
     </div>
  </div>
</div>

htmlcss

Answer №1

You should address the issue with your selector .hov:hover.

Adding a space between them indicates that it's targeting :hover on any child element of .hov

.Product-Card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 8px;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.hov {
  margin: 0 4px 16px;
  border-radius: 4px;
}

.hov:hover {
  box-shadow: 0 4px 12px 0 rgb(44 44 45 / 7%), 0 0 20px 0 rgb(44 44 45 / 7%);
}
<div class="Product-Card hov">
  <div class="Item-Layout">
    <div class="img-box">
      <img src="1.jpg">
    </div>
    <div class="content">
      <div class="product-name">
        <p> Testing
          <p>
      </div>
      <div class="Price">
        <p>$10.40
          <p>
      </div>
    </div>
  </div>
</div>

Answer №2

eliminate the space in .hov:hover

.Product-Card{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 8px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.hov{
  margin: 0 4px 16px;
  border-radius: 4px;
}

.hov:hover{
  box-shadow: 0 4px 12px 0 rgb(44 44 45 / 7%), 0 0 20px 0 rgb(44 44 45 / 7%);
}
<div class="Product-Card hov">
  <div class="Item-Layout">
     <div class="img-box">
        <img src="1.jpg">
     </div>
     <div class="content">
        <div class="product-name">
           <p> Testing <p>
        </div>
        <div class="Price">
           <p>$10.40<p>
        </div>
     </div>
  </div>
</div>

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

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React. One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variabl ...

cssreactjsbootstrap-4

How to move content without affecting the background of the `<body>` using scrolling

Can I achieve a glass morphism effect on my page without moving the background of the body? I only want to move the .container. Is this feasible? I attempted using background-attachment: fixed, but it did not work for me. Here is the code snippet I have be ...

htmlcss

Newly designed Bootstrap 4 input field with search feature positioned off-center on smaller screens

I have successfully positioned an input text next to a button as shown below: While it displays perfectly on a regular computer screen, the alignment gets skewed when viewed on a phone device: This is the functional code I am using: <!-- Add Filer Fo ...

cssbootstrap-4

How can I resolve the issue of the mouse x/y glitch while drawing on an HTML canvas using JavaScript/jQuery?

I've been searching all over for a solution to this issue, but I just can't seem to find out what's causing the problem... This is my first attempt at working on something like this in my spare time. I hope to apply what I learn to create a ...

javascriptjqueryhtmlcanvasdraw

Maximizing Bootstrap's Potential: Achieving Right Alignment for Divs

I am facing a challenge with aligning my div in the layout_cshtml. Currently, it is aligned to the left and the search bar and dropdownlist are not displaying properly. This negatively impacts the user experience. Additionally, my navigation menu is not ...

htmlcssasp.net-mvcbootstrap-4

Is it possible to change the background color of the scrolling page?

Let's say I have 10 different sections, each with a unique background color assigned to them. As the user scrolls down from section 1 through 10, my goal is to dynamically change the body tag's background color based on which section is currentl ...

javascripthtmlcssreactjsnext.js

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

The button labeled "issett" is malfunctioning

Hey there, so I've created a registration form using jQuery and PHP that validates user input in real-time as they type. Once all the information is correct, I want to allow the user to submit the form. My plan is to write an if statement that checks ...

javascriptphpjqueryhtml

What is the process for adding a download link to my canvas once I have updated the image?

Is it possible to create a download link for an image that rotates when clicked, and then allows the user to download the updated image? Any help would be appreciated.////////////////////////////////////////////////////////////////////// <!DOCTYPE ht ...

javascriptjqueryhtmlcsscanvas

Optimal methods for organizing various perspectives on a one-page website

I am developing an application that incorporates AngularJS and Bootstrap. The current setup involves organizing various views using ng-show, allowing for view changes based on button interactions and the enablement/disabling of ng-show values. Within a si ...

javascripthtmlcssangularjssingle-page-application

What is causing this code to keep iterating endlessly?

I have a basic jquery script embedded in my HTML code that utilizes the cycle plugin for jQuery. The problem I'm facing is that when I interact with the slideshow using the "next" or "previous" buttons, it continues to loop automatically after that in ...

javascriptjqueryhtmlwebcycle

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

I've encountered an issue with my HTML page that consists of several textareas. I have a function in place to dynamically add additional textareas using document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></text ...

javascripthtmltypescripttextareainnerhtml

Modify the appearance of material-ui checkbox

For my project, I am utilizing React along with the styled-component package for styling. However, I am facing an issue when it comes to styling the Material-ui checkbox using styled-component. The problem lies in narrowing the border of the checkbox, as t ...

cssreactjsfrontendmaterial-uistyled-components

My Python script using selenium isn't functioning properly - what could be the issue?

Here is a code snippet: from selenium import webdriver driver = webdriver.Chrome(executable\_path=**"C:\\\\browserdrivers\\\\chromedriver.exe") driver.get("https://www.aliexpress.com/item/1005 ...

pythonhtmlseleniumselenium-webdriver

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

My goal is to create a dropdown menu populated with a list of items, and when a product is selected, its price should automatically appear in the quantity field. <ion-item> <ion-label>Item</ion-label> <ion-select (ionChange)="getP ...

javascripthtmlangulartypescript

Locate the hyperlink within a div using JavaScript and navigate to it

I stumbled upon an element (div1) and now I am looking for a link within that element (link) so that I can navigate to it. <div class="div1"> <p> <a href="link">Link</a> </p> </div> ...

javascripthtml

Having trouble with your jQuery image slider?

As a newcomer to jQuery, I have been experimenting with it to gain some experience. I recently tried to integrate a jQuery image slider from slidesjs.com into my local website but unfortunately, it is not functioning as expected. Additionally, I would lik ...

javascriptjqueryhtmlcss

Using arrays to pass parameters in JavaScript

I have multiple sliders that require the same set of parameters to be passed to each one. My understanding is that I need to use an array for this purpose. However, as a JavaScript novice, I am unsure of the correct way to implement it. The parameters lo ...

javascriptjqueryhtmlarraysvariables

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap