实现一个小的hover下拉列表_不算完整

来源：互联网发布：图片滚动播放软件编辑：程序博客网时间：2024/06/09 15:24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.h-block {
width: 15px;
cursor: pointer;
}
.h-block .san-icon {
font-size: 12px;
}
.ul-b {
margin: 0;
padding: 0;
padding-top: 20px;
/*padding: 0;*/
display: none;
width: 15px;
cursor: pointer;
}
</style>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
var $showBlock = $(".ul-b");
$('.h-block').hover(function(){
var $a = $(this).text();
// alert($a);
$showBlock.show();

}
,function(){
// alert(33);
$showBlock.hide();
}
);
// //////////
$('.ul-b').hover(function(){
var $a = $(this).text();
// alert($a);
$showBlock.show();

}
,function(){
// alert(33);
$showBlock.hide();
}
);
////////
$(".ul-b .li-b").click(function(){
$(".h-block").text($(this).text());
$showBlock.hide();
});

});
</script>
</head>
<body>
<div class="h-block">sqf<span class="san-icon">▼</span></div>
<ul class="ul-b">
<li class="li-b">s1</li>
<li class="li-b">s2</li>
<li class="li-b">s3</li>
</ul>
</body>
</html>

0 0