0

我的 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链接在这里

我正在尝试输入三列，这就是我所拥有的，但图像没有显示： 图片

4

3 回答 3

2

只需更改与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;
}
于 2013-11-14T04:33:40.980 回答
1

快速浏览后，我在您的页面中发现了这些问题：

  • 您正在使用background-imageCSS 属性，就好像它是background.

  • <div>包含在. <a>_ <div>_ overflow: hidden;_<div>

  • 您根本不应该将块元素（例如<div>）放在 a<a>中，这不是有效的 HTML。

  • 您正在尝试将 CSS 过渡应用于background属性，但background不可动画化：http ://www.w3.org/TR/css3-transitions/#animatable-properties

简而言之：重写页面，遵循一些好的文档并使用W3C 标记验证器。

于 2013-01-13T03:57:24.637 回答
0

我没有深入研究您的代码，但是您以错误的方式使用了背景属性。

基本上，改变这个：

background-image:url("http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif") no-repeat scroll 0 0 transparent;

对此：

background:url(http://spielconsulting.com/wp-content/uploads/2011/04/icon1.gif) no-repeat 0 0;

检查它是否有效......如果是这样，如果确实有必要，您可以添加“滚动”属性。我什至不知道那个“透明”的东西是什么......默认情况下背景是透明的，所以它不应该是必要的。如果您需要应用另一种背景颜色，请在 url()...

顺便说一句，这就是你应该如何在 CSS 中“思考”背景速记（至少我是如何使用它们的）：

background: color url() repeat fixed left top;

所以：

background: #000 url(imgs/logo.png) no-repeat scroll 0 0;

在示例中，您可以使用透明而不是 #000 颜色，但同样，它是默认值。但是，如果您有另一个规则设置颜色并且您希望它是透明的，请使用它。

还要记住，背景只能应用于“块”元素。如果您的元素不是块元素，请将其设置为，例如： display: block; 或显示：内联块；为它设置一个宽度和一个高度，你应该很高兴。

于 2013-01-13T03:31:50.520 回答