0

私は2x3のマトリックスで記事を表示しています.ラッパーの記事の詳細画像、タイトル、著者、説明をラッパーのdiv内に表示しています.このdiv全体を、1つの画像を含む同じ次元の別の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」のセレクターがここでの主な問題です。これを 2 回定義します。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 に答える