2鼠標懸停/懸停效果在1格嗎？

Question

對於英語不好，我很抱歉。

一個項目（價格）應該出現在圖片中，而另一個（desc）在它之外。我無法得到，只有一個。

我知道我的代碼是錯誤的，但不知道如何咬它。

http://jsfiddle.net/USgE9/1/

<div class="grid_1"> 
<div class="projects view-first"> 
    <div class="tiptext"> <a href=""><img src="http://foto.scigacz.pl/cache/imgs/_w750/gallery/aktualnosci/imprezy/3ci_rajd_chlorowy/img_06.jpg" alt="'" width="235" height="133"/></a> 

     <div class="description">Here is the big fat description box</div> 
    </div> 
    <div class="mask"> 
     <div class="info"> <span style="left:100px;position:absolute;">price: $200</span> 

      <div class="button_add"><a href=""><img src="" alt="" style="float:right;right:20px;"/></a> 
      </div> 
     </div> 
    </div> 
</div> 

$(document).ready(function() { 

    $('.description').hide(); 
    $('.tiptext').hover(function() { 
     if (!$(this).children('.description').is(":animated")) { 
      $(this).children('.description').fadeIn(); 
     } 

    }, function() { 
     $(this).children('.description').fadeOut(); 

    }); 
}); 

.grid_1 { 
    width: 235px; 
} 
.description { 
    display:none; 
    position:absolute; 
    width:173px; 
    height:133px; 
    background-color:#000; 
    margin:-138px 0 0 235px; 
    color:#fff; 
} 
.mask .info { 
    font-size:18px; 
    text-transform:uppercase; 
    color:#fff; 
    margin:4px 0 0 0; 
} 
.mask .info img { 
    display:inline; 
    vertical-align:middle; 
    text-align:center; 
    margin-top:-5px; 
    padding:10px; 
} 
.projects { 
    width: 235px; 
    overflow: hidden; 
    height:133px; 
    cursor: default; 
} 
.projects .mask { 
    width: 235px; 
    height: 33px; 
    overflow:hidden; 
    bottom: 0; 
} 
.view-first .mask { 
    opacity: 0; 
    background-color: rgba(43, 45, 46, 0.9); 
    transition: all 0.4s ease-in-out; 
} 
.view-first:hover .mask { 
    opacity: 1; 
} 
.mask .info { 
    font-size:18px; 
    text-transform:uppercase; 
    color:#fff; 
    margin:4px 0 0 0; 
} 

也許有人能幫助我嗎？

Answer 1

這裏是您的解決方案

第一你的HTML應該是這樣的

<div class="grid_1"> 
    <div class="projects view-first"> 
     <div class="tiptext"> <a href=""><img src="http://foto.scigacz.pl/cache/imgs/_w750/gallery/aktualnosci/imprezy/3ci_rajd_chlorowy/img_06.jpg" alt="'" width="235" height="133"/></a> 

      <div class="description">Here is the big fat description box</div> 
     </div> 


<div class="mask"> 
      <div class="info"> <span style="left:100px;position:absolute;">price: $200</span> 

       <div class="button_add"><a href=""><img src="" alt="" style="float:right;right:20px;"/></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

，你的CSS應該是這樣的

.grid_1 { 
    width: 235px; 
} 
.description { 
    display:block; 
position:absolute; 
    width:173px; 
    height:133px; 
    background-color:#000; 
    left:235px; 
    top:0; 
    color:#fff; 
} 
.mask .info { 
    font-size:18px; 
    text-transform:uppercase; 
    color:#fff; 
    margin:4px 0 0 0; 
} 
.mask .info img { 
    display:inline; 
    vertical-align:middle; 
    text-align:center; 
    margin-top:-5px; 
    padding:10px; 
} 
.projects { 
    width: 235px; 
    height:133px; 
    cursor: default; 
    position:relative; 
} 
.projects .mask { 
    width: 235px; 
    height: 33px; 
    overflow:hidden; 
    bottom: 0; 
    position:absolute; 
} 
.view-first .mask { 
    opacity: 0; 
    background-color: rgba(43, 45, 46, 0.9); 
    transition: all 0.4s ease-in-out; 
} 
.view-first:hover .mask { 
    opacity: 1; 
} 
.mask .info { 
    font-size:18px; 
    text-transform:uppercase; 
    color:#fff; 
    margin:4px 0 0 0; 
} 

請參閱更新http://jsfiddle.net/USgE9/5/

Answer 2

保持簡單，你根本不需要javascript。

我也簡化了很多你的標記和CSS。

http://jsfiddle.net/USgE9/4/

<a href=""> 
    <img src="http://foto.scigacz.pl/cache/imgs/_w750/gallery/aktualnosci/imprezy/3ci_rajd_chlorowy/img_06.jpg" alt="'" width="235" height="133"/> 
    <div class="info">price: $200</div> 
</a> 
<div class="description">Here is the big fat description box</div> 

這可能是你的具體情況太多了簡化，但給你一個很好的清潔起點。