1. To remove the underline, add the following code to your base.css file:
details[open]:hover > .header__menu-item {
text-decoration: none !important;
}
Result:
2. To edit the color of the hover effect in this case, they should all be the same across the three. It can be done as you request, but it would involve adding HTML to the source code, which is a bit complex. However, if you want, you can change this default color in those three elements. Add the following code to your base.css file:
a.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset:hover {
color: cornflowerblue !important;
}
Result:
3. To add hover color effects to these elements: title, search icon, and cart icon, you should add the following code to your base.css file:
/* Title */
a.header__heading-link.link.link--text.focus-inset:hover span {
color: green !important;
}
/* Search Icon */
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle:hover svg {
color: darkred !important;
}
/* Cart Icon */
a#cart-icon-bubble:hover svg {
color: darkblue !important;
}
/* Home Text */
summary.header__menu-item.list-menu__item.link.focus-inset:hover {
color: goldenrod !important;
}
Result:
