Hover style for text separator

Hover style for text separator was created by pegasus

Posted 9 years 3 weeks ago #25699
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
by pegasus

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

Replied by ced1870 on topic Hover style for text separator

Posted 9 years 3 weeks ago #25700
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

by ced1870

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

Replied by pegasus on topic Hover style for text separator

Posted 9 years 3 weeks ago #25726
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
by pegasus

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

Time to create page: 0.603 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 737 guests and no members online