html - css 背景图像不会显示

Question

我的 CSS 需要一张我想在 a:hover 上更改的背景图片。该类在字体颜色更改方面工作正常，但我无法在任何地方显示我的图像。

<ul class="qualities_cycle">
<a href="http://spielconsulting.com/qualities/transition/" class="cyclehover">
<li class="grid_4"> 
   <div class="title-wrap">
          <h3>Partnership Transition</h3>
       </div>
   <h5>Lorem ipsum dolor sit amet consec</h5>
       Seven out of ten Associateships fail - a devastating statistic. Spiel Consulting, however, sees tremendous success with Associateships...
</li>
</a>
</ul>

这是 CSS

.qualities_cycle {
width:100%;
overflow:hidden;
margin:0;
padding:0;
}
.qualities_cycle li {
    padding:0;
    background:none;
    border:none;
    line-height:22px;
    }
    .qualities_cycle li .title-wrap {
        position:relative;
        padding:0 90px 0 60px;
        }
        .qualities_cycle li .icon {
            position:absolute;
            left:0;
            top:0;
            }
        .qualities_cycle li .title-wrap h3 {
            font-weight:normal;
            }
        .qualities_cycle li .title-wrap h3 a {
            color:#0f0f0f;
            text-decoration:none;
            }
        .qualities_cycle li .title-wrap h3 a:hover {
            color:#80B34C;
            }
.grid_4 {
display:inline;
float: left;
position: relative;
padding: 19px 9px !important;
}

a.cyclehover {
color:#0F0F0F; 
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;
-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background 1s ease-in;
}

a.cyclehover:hover {
color: #4C739B;
background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon2.gif") no-repeat scroll 0 0 transparent;
}

jsfiddle 链接是 here

我正在尝试获取三列，这就是我所拥有的，但图像没有显示:

Answer 1

只需更改与a.cyclehover相关的CSS

a.cyclehover {
color: #0F0F0F;
background-image: url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif");
display: block;
float: left;
background-repeat: repeat;
-o-transition: color .2s ease-out, background 1s ease-in;
-ms-transition: color .2s ease-out, background 1s ease-in;
-moz-transition: color .2s ease-out, background 1s ease-in;
-webkit-transition: color .2s ease-out, background 1s ease-in;
transition: color .2s ease-out, background 1s ease-in;
}