0

我提前为糟糕的英语道歉。

一个项目（价格）应该出现在图片中，而另一个（描述）应该出现在图片之外。我拿不到，只有一个。

我知道我的代码是错误的，但不知道如何咬它。

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

也许有人能帮助我？

4

2 回答 2

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>

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

于 2013-06-21T08:27:25.410 回答
0

这是您的解决方案

首先你的 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/

于 2013-06-21T08:32:00.540 回答