0

我在 2x3 的矩阵中显示文章，我在包装器 div 中包装文章详细信息图像、标题、作者和 Desc，我希望整个 div 与包含一个图像的另一个相同尺寸的 div 重叠。

我试过但它不适合我下面是我正在处理的部分代码

   <div id="article2x3-article-wrapperHP">
      <div id="article2x3-image">
         <img src="../images/article/3897b78e-6770-4cf0-a8e5-8638e733c0f4.jpg" class="imgArticle2x3Image" />
      </div>
      <div id="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title </span>
      </div>
      <div id="article2x3-author">
         <span class="lblArticle2x3Author" >by Author XYZ</span>
      </div>
      <div id="article2x3-desc">
         <span class="lblArticle2x3Desc" >Some Description of teh article wil do here</span>
      </div>
     <div class="overlay2x3"><img alt="google" src="http://www.google.com/images/logos/ps_logo2.png" /></div>
   </div>


   <div id="article2x3-article-wrapperHP"  >
      <div class="overlay2x3"><img alt="google" src="http://www.google.com/images/logos/ps_logo2.png" /></div>

      <div id="article2x3-image">
         <img src="../images/article/0e7207e6-d5e6-4f10-9224-988fe0ca338e.png" class="imgArticle2x3Image" />
      </div>
      <div id="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title</span>
      </div>
      <div id="article2x3-author">
         <span class="lblArticle2x3Author" >>by Author XYZ<</span>
      </div>
      <div id="article2x3-desc">
         <span class="lblArticle2x3Desc" >>Some Description of teh article wil do here</span>
      </div>
   </div>


$("#article2x3-outer-wrapperHP").hover(
    function(){$(this).find(".overlay2x3").stop(true, true).fadeIn(500)},
    function(){$(this).find(".overlay2x3").stop(true, true).fadeOut(500)}
);

jsFiddle上的完整代码

我不知道为什么悬停没有触发，我会感谢这方面的帮助

4

2 回答 2

1

它会起作用，但您需要定位各种 div：请参阅http://jsfiddle.net/4qeqm/9/

覆盖 div 必须绝对定位，包装器必须有position: relative;.

编辑：请检查您的 HTML，您在不同的元素上使用相同的 ID。这会产生问题。尝试对类似对象使用类。

于 2013-01-14T13:52:54.220 回答
1

“#article2x3-outer-wrapperHP”的选择器是这里的主要问题，你定义了两次。放弃使用 ID 并转向类：

http://jsfiddle.net/e54cz/

HTML

 <div class="article2x3-article-wrapperHP">
      <div class="article2x3-image">
         <img src="https://twimg0-a.akamaihd.net/profile_images/2788088920/ddc41d50d200366d3fbcb4483ee2154e.jpeg" class="imgArticle2x3Image" />
      </div>
      <div class="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title </span>
      </div>
      <div class="article2x3-author">
         <span class="lblArticle2x3Author" >by Author XYZ</span>
      </div>
      <div class="article2x3-desc">
         <span class="lblArticle2x3Desc" >Some Description of teh article wil do here</span>
      </div>
     <div class="overlay2x3"><img alt="google" src="http://upload.wikimedia.org/wikipedia/en/6/61/Apple_Safari.png" /></div>
   </div>


   <div class="article2x3-article-wrapperHP"  >
      <div class="overlay2x3"><img alt="google" src="http://upload.wikimedia.org/wikipedia/en/6/61/Apple_Safari.png" /></div>

      <div class="article2x3-image">
         <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRLU7TVcauaFMxvO9VVqi82GHljZECxqxT6RvZ6Q7KQ1nlD4wC7nv1ATgE" class="imgArticle2x3Image" />
      </div>
      <div class="article2x3-title">
         <span class="lblArticle2x3Title" >Article Title</span>
      </div>
      <div class="article2x3-author">
         <span class="lblArticle2x3Author" >>by Author XYZ<</span>
      </div>
      <div class="article2x3-desc">
         <span class="lblArticle2x3Desc" >>Some Description of teh article wil do here</span>
      </div>
   </div>

CSS

.article2x3-article-wrapperHP {
float:left;
width:233px;
height:324px;
vertical-align:middle;
margin-right:25px;
overflow:hidden;
background-color: #f5f5f5;
}
.overlay2x3
{
    height:324px;
    width:233px;
    background-color:Red;
    display:none;
    padding:0px;
  z-index:1000;
}
.article2x3-image
{
    margin-top:10px;
    margin-bottom:10px;
    width:233px;
    height:155px;
    overflow:hidden;

}
.article2x3-title
{
    min-height:20px;
    max-height:36px;
    margin:10px 0 0 0;
    width:230px;
    overflow:hidden;

    font-size:14px;
}
#article2x3-author
{
    height:14px;
    margin:0 0 5px 0;
    width:230px;
    overflow:hidden;
     font-size:10px;
     font-style:italic;
     color:Gray
}
.article2x3-desc
{
    height:100px;
    margin:0 0 10px 0;
    width:230px;
    overflow:hidden;
     font-size:12px;
     border:0px solid #f5f5f5;
     text-align:justify;
}
.imgArticle2x3Image
{
    width:230px;
    border:0px;
    -moz-box-shadow: 1px 2px 3px #777;
    -webkit-box-shadow: 1px 2px 3px #777;
    box-shadow: 1px 2px 3px #999;
}
于 2013-01-14T13:57:44.657 回答