Help with some CSS please

  • Hi,

    I am looking to find out how to code this effect when you hover over the recent posts section from this website https://keystoyourfitness.com/blog/

    As you hover down the list, when you reach a post that has a long title it expands down so you can see the whole title.

    The div class is .widget and I’ve looked at the CSS and it doesn’t mention much. This is a pre-installed widget.

    I would really appreciate any help.

    Thanks
    Wendy

Viewing 3 replies - 1 through 3 (of 3 total)

  • I think it is being caused by the sidebar “hover” background. If you look closely, you will see that the complete title is already there, it’s just that on hover with the background color, it is causing the text to move to the right slightly using two lines instead of one, if there is enough text.

    #sidebar ul li:hover {
    background:#4C5A03 none repeat scroll 0 0;
    padding-left:8px;
    }

    ClaytonJames is right although if you’re going to do this I strong recommend not doing the hover on the li but the A tag instead. Many browsers do not support li:hover.

    Thread Starter wmakara

    (@wmakara)

    Hi,

    That works to some degree, now I have added this to my site but I have a few more factors to take into account.

    My CSS is:

    #sidebar ul li a:hover {
    text-decoration: none;
    background: url(“images/sidebar_menu_hover1.gif”) no-repeat left bottom;
    }
    I have added repeat scroll 0% 0% after bottom and added in padding-left: 10px

    The remaining words still don’t show because I need to code around the background image properly.

    I don’t know much about coding I’m just tweaking a template so tags/classes don’t mean a lot to me half the time.

    Any ideas?

    Thanks
    Wendy

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Help with some CSS please’ is closed to new replies.