Horizon hover over header

Ask & Offer
1

Hi community, I recently added the following code to my CSS:
{% if template == ‘index’ %}

#header-component:hover { background: #ffffffcf !important; } #header-component:hover * { color: #d34343; } Hi community, I recently added the following code to my CSS: #header-component:hover .header-logo__image-container--original { display: block; } #header-component:hover .header-logo__image-container--inverse { display: none; }

{% endif %}

It did what I wanted to, but it did more. One I hover, the text also changes the color when you click on the shopping cart. How can I make a code that overrules the other code so that my shopping cart keeps its text white on the button ‘doorgaan met winkelen’. My website is: www.pulse-collection.nl

2

Hi @PULSECOLLECTION,

The issue happens because your current CSS targets all elements inside #header-component when hovered:

#header-component:hover * { color: #d34343; }

This applies to every child element, including the shopping cart text. To fix it, you can exclude the cart button by being more specific with your selectors or using :not(). For example:

#header-component:hover *:not(.cart-button-class) {
  color: #d34343;
}

Make sure to replace .cart-button-class with the actual class of the “doorgaan met winkelen” button.

Alternatively, you can override it with a more specific rule:

.cart-button-class {
  color: #ffffff !important;
}

This ensures your cart button text stays white regardless of the hover effect on the header.

If you want, I can write a ready-to-copy snippet for your exact header setup so you won’t have any unintended hover color changes. Do you want me to do that?