javascript - 1 个 div 中有 2 个鼠标悬停/悬停效果？

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

保持简单，您根本不需要 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>

对于您的特定情况，这可能过于简化，但为您提供了一个良好的干净起点。