本文主要是介绍css样式实现鼠标滑过显示鼠标滑过块上移，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1，纯css样式实现鼠标滑过显示
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">*{margin: 0; padding: 0;font-family:arial;}.messdiv{position: relative;width: 150px; height: auto;font-size: 14px;margin: 20px 0 0 20px;}.selecshow{display: none;position: absolute;border: 1px solid #ccc; box-shadow: 0px 8px 16px 0px #666;padding: 10px;min-width: 140px;line-height: 30px;}.messdiv:hover .selecshow{display: block;}</style>
<body><div class="messdiv"><span>鼠标划我显示下拉信息</span><div class="selecshow"><p>下拉信息1</p><p>下拉信息2</p></div></div></body>
</html>2 ，纯css样式实现鼠标滑过 块上移特效
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">li{list-style: none;width: 200px;height: 200px;background: greenyellow;border: solid 2px red;float: left;margin-left: 10px;transition: transform 0.1s;}li:hover{cursor: pointer;transform: translate(0,-10px);}</style><body><div><ul><li></li><li></li><li></li><li></li><li></li></ul></div></body>
</html>这两个例子真是简单易懂，建议初学者看看。
这篇关于css样式实现鼠标滑过显示鼠标滑过块上移的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
