Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 13, 2016 at 10:26 am #564478
    irishlatino

    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

    January 13, 2016 at 2:05 pm #564692
    Josue

    Hey!

    Try changing the CSS code to:

    .avia-icon-list:hover .iconlist_icon{
background-color: orange;
}

    Best regards,
    Josu

    January 13, 2016 at 3:38 pm #564756
    irishlatino

    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!

    January 13, 2016 at 4:20 pm #564778
    Yigit

    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

    January 13, 2016 at 4:56 pm #564805
    irishlatino

    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

    January 13, 2016 at 5:06 pm #564820
    Yigit

    Hey!

    Please see private content field below

    Best regards,
    Yigit

    January 13, 2016 at 5:14 pm #564833
    irishlatino

    See private below thanks!

    January 13, 2016 at 5:30 pm #564851
    Yigit

    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

    January 13, 2016 at 5:32 pm #564855
    irishlatino

    Thanks Yigit! Works a treat!

    January 14, 2016 at 4:44 am #565198
    Rikard

    Hi,

    Great, glad we could help :-)

    Thanks,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.