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;
}

该代码适用于小提琴，但不适用于我的网站。div 中的文本未显示在我的网站上。谁能指导我为什么会发生这种情况？

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 href="#"></a>环绕 a<div>是完全错误的。打算更多地调试 CSS，但您可能需要澄清最终结果是什么。就目前而言，这真的很混乱且难以破译。我认为它现在可以工作，但我仍然不确定基于代码格式的方式。

于 2013-01-26T19:55:30.563 回答
1

查看我的 jsFiddle 分支。这是你要找的吗？基本上，不是对不透明度进行调整，而是display:none在常规.img-overlaycss 上使用，然后更改为display:blockon :hover。这在您的网站上有效吗？ui假设您的意思是ul.

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

text-indent:-9000px;

我对此发表了评论，并且在更新的 jsFiddle中一切看起来都很棒。让我知道这是否可以解决您的问题。

于 2013-01-26T19:58:45.017 回答