Question

我想我很亲近，但我不知道遗失了什么。我在这个小提琴上使用相同的代码： 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;
}

代码适用于小提琴，但不适用于我的网站。 div中的文字没有显示在我的网站上。任何人都可以指导我为什么会发生这种情况吗？

Answer 1

<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 href="#"></a>缠绕<div>也是完全错误的。是否会更多地调试CSS，但您可能需要澄清最终结果是什么。目前看来，这真的很混乱。难以破译。我认为它现在有效，但我仍然不确定代码的格式化方式。

Answer 2

结帐my fork of your jsFiddle。这是你在找什么？基本上，不要对不透明度进行调整，而是在常规display:none css上使用.img-overlay，然后在display:block上更改为:hover。这适用于您的网站吗？假设您的意思是ui，我还提出了@JakeGould关于您未公开的ul标记的建议修改。

另外，为什么这条线在这里？

text-indent:-9000px;

我评论说updated jsFiddle中的所有内容都很棒。如果能解决问题，请告诉我。

无法使用css显示文本叠加层

2 个答案: