CSS Change arrow color when ul submenu is hovered

[mjdeutz]

Hi and thanks in advance,

In CSS I have created a right facing arrow used to denote a range of years which is displayed in a number of submenus in an ul horizontal menu

eg: the text in the submenus is something like:

'2020 > 2021'
'2018 > 2019'
'2016 > 2017'

(where the '>' is a placeholder for my actual arrows)

Currently, when the li is hovered, the text changes color from black to white and I want my arrow to also change to white.

I create the right facing arrow like this ...


[CODE lang="css" title="Arrow code"]
.arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid black;
display: inline-block;
padding-bottom: 5px; /* align and center the arrow with the text */
}

/* Transform the arrow to the right orientation */
.right {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}

/* This changes the text in the submenu to white and the background to green when hovered over */
.dropDownMenu ul li a:hover {
background-color: #164149; /* Dark Green */
color: White;
}

/* Here is the pertinent HTML to display the arrow in the menu text */
<ul>
<li><a href="#"><img src="http://sharepoint/GSites/Dnt/OP/OP_Res/files.png" width="20" align="middle" border="none"><span class="nav-text">&nbsp;&nbsp;2021&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2023</span></a>[/CODE]

 

[Mutiny]

I think you should just be able to make a new CSS rule for the arrow:

.dropDownMenu ul li a:hover .arrow {
    background-color: #164149; /* Dark Green */
    color: White;
}

 

[BGB]

Here -

.dropDownMenu ul li a:hover .arrow {
    border-bottom: 4px solid White;
}

 

[mjdeutz]

I think you should just be able to make a new CSS rule for the arrow:

.dropDownMenu ul li a:hover .arrow {
    background-color: #164149; /* Dark Green */
    color: White;
}

Thanks Mutiny, that CSS worked fine. Much appreciated!

 

[mjdeutz]

Here -

.dropDownMenu ul li a:hover .arrow {
    border-bottom: 4px solid White;
}

Thanks BGB, worked as written. Much appreciated!

 

[Malcolm]

Hi all,

I have moved this to HTML & CSS. With that said, @mjdeutz I see that both @Mutiny and @BGB have provided a solution to your issue. Happy to hear! Don't forget to mark it as the solution!

 

[mjdeutz]

Hi all,

I have moved this to HTML & CSS. With that said, @mjdeutz I see that both @Mutiny and @BGB have provided a solution to your issue. Happy to hear! Don't forget to mark it as the solution!

Hi Malcolm,

Thanks for the reminder to mark as the solution. It is a pity we can't give more than one coder the formal credit Cheers