Javascript 一个div中有2个鼠标悬停/悬停效果？

我为英语不好提前道歉

一个项目（价格）应出现在图片中，另一个项目（描述）应出现在图片外。我无法得到，只有一个

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

.grid\u 1{
宽度：235px；
}
.说明{
显示：无；
位置：绝对位置；
宽度：173像素；
高度：133px；
背景色：#000；
保证金：-138px 0 0 235px；
颜色：#fff；
}
.mask.info{
字号：18px；
文本转换：大写；
颜色：#fff；
保证金：4px0；
}
.mask.info-img{
显示：内联；
垂直对齐：中间对齐；
文本对齐：居中；
页边顶部：-5px；
填充：10px；
}
.项目{
宽度：235px；
溢出：隐藏；
高度：133px；
游标：默认值；
}
.项目.面具{
宽度：235px；
高度：33像素；
溢出：隐藏；
底部：0；
}
.先看.遮罩{
不透明度：0；
背景色：rgba（43,45,46,0.9）；
过渡：所有0.4缓进缓出；
}
.view优先：悬停.mask{
不透明度：1；
}
.mask.info{
字号：18px；
文本转换：大写；
颜色：#fff；
保证金：4px0；
}

---

也许有人能帮我？

简单点，你根本不需要javascript

我还简化了许多标记和css

这是一个很大的描述框

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

这是您的解决方案

首先，您的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>

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

---

请参阅更新的

如果我将车身背景颜色设置为灰色，我可以看到照片下方带有价格的文字。你想把它放在画面中间，那是期望的行为吗？如果是，请尝试在

左侧：100px附近添加
顶部：100px
它会导致将价格放在图片前面。嘿，它工作得很好，但是如果我把图片并排放在一起呢？可能会出现在图像上方吗？z指数？哈！z-index:1开。说明，z-index:2开img，效果很好，THX太多了！：）
<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>

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

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