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 リンクはこちら

私は3つの列を取得しようとしていますが、これは私が持っているものですが、画像が表示されていません: 画像

4

3 に答える 3

1

ざっと見たところ、あなたのページに次の問題があることがわかりました。

  • background-imageCSS プロパティをあたかものように使用していますbackground。

  • <div>に含まれる の内部には<a>、ページ内の通常の要素フローの外側にあると見なされるフローティング要素があるため、<div>高さが nullになります。overflow: hidden;スタイルを に追加することで、これを「修正」できます<div>。

  • ブロック要素 ( など<div>) を 内に配置<a>しないでください。これは有効な HTML ではありません。

  • backgroundプロパティにCSS トランジションを適用しようとしていますが、アニメーション化backgroundできません: http://www.w3.org/TR/css3-transitions/#animatable-properties

要するに、ページを書き直し、いくつかの適切なドキュメントに従い、W3C Markup Validatorを使用してください。

于 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 カラーの代わりに透明を使用できますが、これもデフォルトです。ただし、色を設定する別のルールがあり、それを透明にしたい場合に使用します。

また、背景は「ブロック」要素にのみ適用できることに注意してください。要素がブロック要素でない場合は、次のように設定します。または表示: インラインブロック; 幅と高さを設定すると、準備完了です。

于 2013-01-13T03:31:50.520 に答える