Home/ Questions/Q 8753151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T13:22:24+00:00

I am trying two create a rollover effect on my <li> with the background

  • 0

I am trying two create a rollover effect on my <li> with the background of the <li> Changing completely. The background on the none active state fits close but on rollover the background is off. below is my code.

HTML: 

<div class="sidebox">
<ul>
<li><a href="http://2020mediaonline.com/wptest/wp-login.php">Log in</a></li>
<li><a href="http://2020mediaonline.com/wptest/?feed=rss2">Entries</a></li>
<li><a href="http://2020mediaonline.com/wptest/?feed=comments-rss2" >Comments</a></li>
<li><a href="http://wordpress.org/">WordPress.org</a></li>
</ul>
</div>

Here is my css:

div.sidebox ul {list-style-type:none;font:12px arial;}
div.sidebox ul li{background: url(images/right_ul_bg.jpg) no-repeat left;padding:10px 0 0 50px;}
div.sidebox ul li a{text-decoration:none;color:white;display:block;height:31px; width:247px;}
div.sidebox ul li a:hover{ background:#2f373c url(images/right_ul_bg_hover.jpg) -10px -50px;}

here is a live example http://jsfiddle.net/cd7rR/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re putting the hover background image on the anchor. The original background image is on the list-item. The anchor is offset because you have padding declared on the list-item. Here’s a demo with the hover background on the list-item.

    div.sidebox ul li:hover{ background:url(http://2020mediaonline.com/wptest/wp-content/themes/Price_LawTheme/images//right_ul_bg_hover.jpg) no-repeat;}div.sidebox ul

    http://jsfiddle.net/cd7rR/1/

    • 0