用jquery模仿的a的title属性的例子_jquery

<div class="wrap">
<ul class="list clearfix">
<li><a href="">UI设计师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1125">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680079579055.png" alt="OneStory">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1125">OneStory</a>
                            <p>OneStory 是一款创新的AI故事生成助手，用AI快速生成连续性、一致性的角色和故事。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="OneStory">
                                <span>319</span>
                            </div>
                        </div>
                        <a href="/ai/1125" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="OneStory">
                        </a>
                    </div>
                
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">前端开发工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">运维工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">研发开发工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">UI设计师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">前端开发工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">运维工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">研发开发工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">UI设计师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">前端开发工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">运维工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>
<li><a href="">研发开发工程师</a>
<div class="show">
<p>所属部门：技术部</p>
<p>工作地点：郑州</p>
<p>招聘人数：21</p>
</div>
</li>

</ul>
</div>

* {
margin:0;
padding:0;
}
body {
font-size:12px;
}
.wrap {
width:600px;
margin:100px auto;
}
.clearfix:after, .clearfix:before {
display:table;
content: "";
}
.clearfix:after {
clear:both;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
.list {
position:relative; //作为定位的父元素，li直接做父元素出现元素内容重叠问题
}
.list li {
list-style:none;
width:100px;
height:24px;
line-height:24px;
margin-right:10px;
float:left;
}
.list li a {
text-decoration:none;
color:#333;
display:block;
}
.show {
position:absolute;
width:100px;
background:#FFFFE1;
border:1px solid #ffcc01;
padding:6px;
display:none;
z-index:5;
margin-top:10px; //代替top
margin-left:60px; //代替left
}
.show p {
height:18px;
line-height:18px;
}
.list li a:hover {
text-decoration:underline;
color:#FF0000;
}

<script type="text/javascript">
$(function(){
var $li=$(".wrap").find("li");
$li.bind("mouseover",function(){
$(this).find(".show").show(); 
}).bind("mouseout",function(){
$(this).find(".show").hide();
})
})
</script>