jquery—鼠標移入移出動作與元素的顯示和隱藏

jquery中的鼠標移入和移除動作控制元素的顯示或隱藏。

效果：

 

方法：

使用jquery中的鼠標移入和移除動作：

移入：onmouseover

移出：onmouseout

html

<!-- 最外層div添加了兩個動作，以及動作觸發的函數 -->
<div class='atlas' onmouseover='overShow(this)' onmouseout='outHide(this)'>
    <img class='atlas-img' src='" + Atlas[i] + "' onclick='openFile(this)'>
    <div class='atlas-del' onclick='delBox(this)'>
        <img src='img/delete.png'>
    </div>
</div>   

js

function overShow(e) {
    var p = $(e).children('div');
    p.attr("style", "display:table-cell;");
}
function outHide(e) {
    var p = $(e).children('div');
    p.attr("style", "display:none;");
}

css

.atlas{
    display: inline-block;
    margin: 20px;
    height: 135px;
    position: relative;
}
.edi-atlas .atlas-img{
    height:135px;
    width: 240px;
}
.edi-atlas .atlas-del{
    height:135px;
    width: 240px;
    background-color: #403d44;
    opacity:0.5;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
}