Tagged: icon list
Hi
Do you have a quick script for changing the background colour of the icon when there is a mouseover on the text link in the icon list.
This CSS changes the icon bg:
.avia-icon-list .iconlist_icon:hover {
background-color: orange;
}
So just need a JS to link the iconlist_title a:hover to the avia-icon-list and visa versa.
Thanks a million
Hey!
Try changing the CSS code to:
.avia-icon-list:hover .iconlist_icon{
background-color: orange;
}
Best regards,
Josu
Hi Josu,
Thanks for this, but this doesn’t perform the task I need.
I can control the icons and text :hover with CSS without any problem.
Let me try to explain again in a different way.
When the user places the mouse over the text link then the link currently underlines. When the user places the mouse over the icon the bg changes color. This is all good.
I need the icon background to change color when the mouse is over the text link. And visa versa, I need the text to underline when the user puts the mouse over the icon.
Thanks for your patience!
Hey!
Can you please post the link to your page where we can see your element? As far as i understood, Josue’s code should have helped.
Best regards,
Yigit
Sure no problem. Scroll down a bit and take a look in the second section of the page and you will see some test icon lists.
Changes made only in custom.css
The behaviour is strange now as when the mouse touches any link in the icon list all of the icon change colour.
Thanks
See private below thanks!
Hi!
Please add following code to Quick CSS
.avia-icon-list li:hover .iconlist_title {
text-decoration: underline;
}
.avia-icon-list li:hover > a {
background: red!important;
color: orange!important;
}
Regards,
Yigit
Thanks Yigit! Works a treat!