Text color should appear when hover on any where on the box

Janu sree · ‎10-06-2023

Hello Community,

When I hover on the text only then the text color is visible to red, Is there a way to make sure text color will be red when I hover anywhere on the entire box(menu)?
Below is the HTML and css code I am using.

HTML:

<ul ng-if="c.data.i18nPluginInstalled && c.data.enableLangSelector" class="nav navbar-nav" aria-label="${Header}" role="menubar">
<li>
<a class="lang-popup-link "
uib-popover-template="'spLanguageSelector'"
popover-trigger="outsideClick"
popover-placement="bottom-right"
popover-animation="true"
popover-popup-close-delay="70"
popover-is-open="c.popoverIsOpen"
ng-click="c.togglePopover()"
role="menuitem"
type="link"
href="javascript&colon;void(0)">

<div>

{{c.selectedLanguageLabel}}

</div>
</a>
<a class="lang-page-link" ng-href="?id=region_language_select" ng-click="c.collapse()">

{{c.selectedLanguageLabel}}

</a>
</li>
</ul>

CSS:

ul.nav.navbar-nav {
position: absolute;
top: 60px;
right: 0;
}

a.lang-popup-link {
color: #000000 !important;
font-weight: bold;
padding-top: 14px !important;
padding-bottom:0px !important;
height: 50px !important;
}

&:hover{
color: $navbar-inverse-link-hover-color;
cursor: pointer;
background-color: darken($sp-navbar-divider-color, 5%);
}

Iraj Shaikh · ‎10-06-2023

Hi,

To make sure that the text color turns red when you hover anywhere on the entire box (menu), you need to update your CSS. Currently, you have the `:hover` pseudo-class applied directly to an ampersand (`&`), which seems to be an error in your CSS. Instead, you should apply the `:hover` pseudo-class to the anchor (`<a>`) element to change the text color when hovering over the entire box/menu. Here's the updated CSS:

ul.nav.navbar-nav {
position: absolute;
top: 60px;
right: 0;
}

a.lang-popup-link {
color: #000000 !important;
font-weight: bold;
padding-top: 14px !important;
padding-bottom: 0px !important;
height: 50px !important;
transition: color 0.3s; /* Add a smooth transition for the color change */
}

a.lang-popup-link:hover {
color: red; /* Change the text color to red when hovering over the entire box/menu */
cursor: pointer;
background-color: darken($sp-navbar-divider-color, 5%);
}

In this updated code, the `:hover` pseudo-class is applied to the `a.lang-popup-link` element, which means that when you hover anywhere on that link (the entire box/menu), the text color will change to red as specified in the `color` property within the `:hover` block. Additionally, a smooth transition effect has been added to make the color change visually pleasing.

If your problem is solved then please mark it helpful.

Janu sree · ‎10-08-2023

Hi @Iraj Shaikh - Thanks for the response

I've tried by applying hover to the `a.lang-popup-link' like below, but in this case hover itself is not working