1

私は近いと思いますが、何が欠けているのかわかりません。このフィドルと同じコードを使用しています: http://jsfiddle.net/2tPGy/3/

HTML:

    <ul class="projectGrid align">
        <li id="project-1">
             <a href="#">
                 <div class="img-overlay">
                     <h4>Title</h4>
                     <p>A description of the image</p>
                 </div>
             </a>
        </li>
      </ul>

CSS:

  .projectGrid li {
 display: inline-block;
 margin: 0 20px 20px;
 box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
 opacity:0.7;
 border-radius: 11px;
 -moz-border-radius: 11px;
 -webkit-border-radius: 11px;

 text-indent: -9000px;
-webkit-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
-moz-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
-o-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
-ms-transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;
 transition: box-shadow .25s  ease-in-out, opacity .25s ease-in-out;

 }  
   .projectGrid li a {
   display: block;
   width: 280px;
   height: 280px;
   background-color: grey;
   border: solid;
   border-radius: 11px;
  -moz-border-radius: 11px;
  -webkit-border-radius: 11px;
  } .projectGrid li:hover {
   box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
   opacity:1.0;

  }
 #project-1 {
    height:286px;
    overflow:hidden;
    position:relative;
    width:286px;
 }
.img-overlay {
    background-color:#000;
    bottom:0;
    color:#fff;
    opacity:0;
    filter: alpha(opacity=0);
    position:absolute;
    width:100%;
    z-index:1000;
}
#project-1:hover .img-overlay {
    opacity:0.75;
    filter: alpha(opacity=75);
    transition:opacity 0.25s;
    -moz-transition:opacity 0.25s;
    -webkit-transition:opacity 0.25s;
}
#project-1 a {
    background: url('../images/1.png') no-repeat scroll;
    background-size: 280px 280px;
}

コードはフィドルで動作しますが、私の Web サイトでは動作しません。div のテキストが Web サイトに表示されません。なぜこれが起こっているのか、誰かが私を導くことができますか?

4

2 に答える 2

2

<ul>タグのつづりが間違っているだけでなく、タグが閉じられ<ui>ていませんでした。<ul>jsFiddle の更新はこちら: http://jsfiddle.net/KwyDt/3/

<ul class="blah">
  <li id="project-1">
      <a href="#">
      <div class="img-overlay">
          <h4>Title</h4>
          <p>A description of the image</p>
      </div>
      </a>
  </li>
</ul>

また、 a を<a href="#"></a>ラップすること<div>は完全に間違っています。CSS をさらにデバッグする予定でしたが、最終結果が何であるかを明確にする必要があるかもしれません。現状では、これは本当に厄介で解読が困難です。現在は機能していると思いますが、コードのフォーマット方法に基づいて、まだ確信が持てません。

于 2013-01-26T19:55:30.563 に答える
1

あなたの jsFiddle の私のフォークをチェックしてください。これはあなたが探しているものですか？基本的に、不透明度を調整する代わりにdisplay:none、通常の.img-overlaycss を使用してからdisplay:blockonに変更し:hoverます。これはあなたのサイトで機能しますか? uiまた、あなたが意味していると仮定して、あなたの閉じられていないタグに関する@JakeGouldの提案された編集を行いましulた.

また、なぜこの行がここにあるのですか?

text-indent:-9000px;

私はそれをコメントアウトし、更新された jsFiddleですべてが見栄えがします。それがあなたの側の問題を解決するかどうか教えてください。

于 2013-01-26T19:58:45.017 に答える