Hover style for text separator
9 years 9 months ago #25699
by pegasus
Hover style for text separator was created 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:
Many thanks for the help!
Wendy
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.
9 years 9 months ago #25700
by ced1870
Joomlack Webmaster and Developer
Replied by ced1870 on topic Hover style for text separator
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
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.
9 years 9 months ago #25726
by pegasus
Replied by pegasus on topic Hover style for text separator
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
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