Hover style for text separator
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
by pegasus
Please Log in or Create an account to join the conversation.
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
by ced1870
Please Log in or Create an account to join the conversation.
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
by pegasus
Please Log in or Create an account to join the conversation.
Time to create page: 0.603 seconds