鼠标经过显示下拉菜单css配置
发布时间：2018-07-10 00:01:21
作者：ynkulusi3
当鼠标经过ul区域文字时，显示li内容，鼠标移开后，不现实li内容。
<div id="a">
<ul>鼠标经过这里
<li>
<ul> <li>AAA</li> </ul>
</li>
<li>
<ul> <li>BBB</li> </ul>
</li>
<li>
<ul> <li>CCC</li> </ul>
</li>
</ul>
</div>
<style>
#a ul li{
display:none;
}
#a ul:hover li{
display:list-item;
color: blue;
background: green;
}
</style>
分类：html
评论数：2
阅读数：855
-
2018-07-10 00:58:021javascript实现方式：
<script type="text/javascript">
//hover接收2个参数,第一个是经过,第二个是离开;
$('#a').hover(function(){
$(this).find('ul').show();
},function(){
$(this).find('ul').hide();
});
</script> -
2018-07-11 13:03:482鼠标经过，div宽度渐变效果。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>