jq 鼠标指向隐藏显示区域

html
 <ul>
 <li>
 <a href="#" id="product"><img src="img/资源-1.png" alt=""></a>

                <a href="#" class="sub" id="sub">
                    <span class="look">查看详情</span>
                    <span class="line"></span>
                    <span class="xj">立即询价</span>
                </a>

                <span class="title1">盐酸左旋西替利泰（这是名）</span>
                <span class="price1">￥14</span>
            </li>
 
 </ul>
css
.sub{
 position: absolute;
 bottom: 67px;
 width: 230px;
 height: 38px;
 background: rgba(255, 54,54, 0.7);
 display: block;
 display: none;
}
 
 jq
 
$("ul li").hover(function(){
 $(this).find(".sub").show()},
function(){
 $(this).find(".sub").hide();
})