Question

我正在以2x3的矩阵显示文章，我的包装文章详细信息图片，标题，作者＆amp;包装内的描述div＆amp;我希望整个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

上的完整代码

我不确定为什么悬停不会触发，我会很感激这方面的帮助

Answer 1

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

重叠div必须绝对定位，包装必须有position: relative;。

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

Answer 2

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

用另一个div覆盖一个div而不用于鼠标悬停

2 个答案: