# Help with CSS :hover **URL:** \ **Category:** Website Builder\ **Tags:** cms\_code\ **Created:** [November 2, 2024, 12:42am UTC](https://community.sitejet.io/t/help-with-css-hover/3901 "2024-11-02T00:42:19Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Olivia\_Riggs](https://avatars.discourse-cdn.com/v4/letter/o/c67d28/32.png) [@Olivia\_Riggs](https://community.sitejet.io/u/Olivia_Riggs)\ **Post date:** [November 2, 2024, 12:42am UTC](https://community.sitejet.io/t/help-with-css-hover/3901/1 "2024-11-02T00:42:19Z")
Hi everyone, I know CSS basics and have some elements on my website that grow on hover using the :hover pseudo-class. They work as they should. I’m trying to replicate that for a container with 3 containers inside of it, but for some reason the hover effect is being applied to each individual element within the main container. ![Screenshot 2024-11-01 193237](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/6/62b2882879f55f76e02408e83f5f39f384f5c0b6.png) This screenshot shows the container that I want to have the hover feature, which has applied the CSS class hover (and ease) that I created for the times I’ve used hover in the past. So I know I’m applying the class to the right container, but for some reason it’s not treating the container as a real box. I’ve tried putting the class in the Element tab and the Container tab, and it makes no difference either way. This screenshot shows my :hover css code. ![Screenshot 2024-11-01 192928](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/9/95eeeda531f07075034f8e2b79ed5a40c33b9fdd.png) Here is my preview link: [http://392365-ca177.preview.sitejet.io/](http://392365-ca177.preview.sitejet.io/) ![Screenshot 2024-11-01 194136](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/2/2b38e4e64e5339b40e6df1f54410687b657dd122.png) I’d like to make the whole green boxes under “What We Offer” grow and shrink on hover on and off. The first box only has the classes applied. The section directly underneath, “Learn and Connect” uses the hover feature on the icons. They are just icons inside of a container and they work correctly. Can anyone tell me what am I doing wrong in this instance? Thanks! ---
**Author:** ![Giaco\_Sitejet\_Team](https://avatars.discourse-cdn.com/v4/letter/g/958977/32.png) [@Giaco\_Sitejet\_Team](https://community.sitejet.io/u/Giaco_Sitejet_Team)\ **Post date:** [November 6, 2024, 7:20am UTC](https://community.sitejet.io/t/help-with-css-hover/3901/2 "2024-11-06T07:20:52Z")
Hi @Olivia_Riggs I understand what you mean, and you just need to adjust the selector to get it right. As you can see in the image below, each element (e.g. headline) is encapsulated in a `div` (I’ve added a red border so that’s visible). ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/2X/e/ec6f4329b3299a4e30e392ac0dfa958b87c3d25e.png) With this selector `.hover div:hover { ... }` the hover effect is added to every `div` inside the container with the class **`hover`**. To work, you just need to customize it as follows: ` .hover:hover { ... }`. This way you can be sure that the hover effect is only added to the container with this class. I hope I could help you. 🙂 Best regards ---
**Author:** ![Olivia\_Riggs](https://avatars.discourse-cdn.com/v4/letter/o/c67d28/32.png) [@Olivia\_Riggs](https://community.sitejet.io/u/Olivia_Riggs)\ **Post date:** [November 13, 2024, 5:24pm UTC](https://community.sitejet.io/t/help-with-css-hover/3901/3 "2024-11-13T17:24:26Z")
Thank you so much! Fixing that solved my problem. I appreciate it! ---
**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\ **Post date:** [November 15, 2024, 11:21am UTC](https://community.sitejet.io/t/help-with-css-hover/3901/4 "2024-11-15T11:21:19Z")