Hover style for text separator

More
9 years 9 months ago #25699 by pegasus
I'm using text separators in one of our sidebar menus to group links into level-2 sub-menus. The text separators contain the parent arrow, and the slide-down sub-menus open up when the text-separator or arrow are clicked.

I have added custom styling to the CSS so that both the background and font colours change when hovered. The problem is that although the font colour changes correctly, the background-color stays the same.

I'm hoping someone can identify what I'm doing wrong.

Here's the top page of the section with this menu:
ecnetsolutions.net/clients/utovstest/ind...p/dovs-home/orgchart

The CSS I've used is:
Code:
/* === Change background colour when hovered */ ul#accordeonckid li.level1 a:hover, ul#accordeonckid li.level1 > a.toggler:hover { background: #5c85d6; /* Old browsers */ background: -moz-linear-gradient(top, #5c85d6 0%, #3c68af 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5c85d6), color-stop(100%,#3c68af)); /* Chrome,Safari4+ */ background: webkit-linear-gradient(top, #5c85d6 0%,#3c68af 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5c85d6 0%,#3c68af 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5c85d6 0%,#3c68af 100%); /* IE10+ */ background: linear-gradient(to bottom, #5c85d6 0%,#3c68af 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c85d6', endColorstr='#3c68af',GradientType=0 ); /* IE6-8 */ color: #fff; }

Many thanks for the help!

Wendy

Please Log in or Create an account to join the conversation.

More
9 years 9 months ago #25700 by ced1870
Hi
this is because the background property is used to display the arrow with a !important property
then you can not use another background-image for your gradient, you can only use a background-color with !important
Else you will remove the arrow
CEd

Joomlack Webmaster and Developer

Please Log in or Create an account to join the conversation.

More
9 years 9 months ago #25726 by pegasus
Hi CEd,

Thanks very much! I hadn't noticed that it was a background img. I was able to fix it by adding the background URL for the arrow to the background-gradient in my custom hover style (and a few other tweaks).

Many thanks for your help!

Wendy

Please Log in or Create an account to join the conversation.

Time to create page: 0.198 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 603 guests and no members online