选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{
background-color:yellow;
}
//hover,鼠标移入移出的另一种用法
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>左导航特效</title><style type="text/css">* {margin: 0px;padding: 0px;font-size: 12px;}#nav .navsbox {width: 160px;}#nav .navsbox .firstnav {height:45px;line-height:45px;background-color:#ebebeb;border-left:10px solid #fe705c;padding-left:20px;width:130px;font-weight:bold;cursor: pointer;}#nav .navsbox ul {display:none;list-style:none;}#nav .navsbox ul li {display:block;height:45px;line-height:45px;padding-left:70px;width:90px;background-color:#f2f2f2;background-position:33px 7px;background-repeat:no-repeat;}#nav .navsbox ul li.jedh {background-image:url(./images/huan.gif);}#nav .navsbox ul li.jlbbyk {background-image:url(./images/you.gif);}#nav .navsbox ul li.jwljb {background-image:url(./images/gouwu.gif);}#nav .navsbox ul li.mrljb {background-image:url(./images/meiri.gif);}#nav .navsbox ul li.vipjtj {background-image:url(./images/zhe.gif);}#nav .navsbox ul li.onbg {background-color:#f9dbd1;}#nav .navsbox ul li a {color:#000;text-decoration:none;}</style><script src="js/jquery-1.11.3.min.js?1.1.11"></script><script>$(function () { $(.firstnav).click(function () {var $ul= $(this).next(); if($ul.is(:visible)){ $ul.hide(); }else{ $ul.show(); $ul.children().hover(function () { $(this).addclass(onbg); },function () { $(this).removeclass(onbg) }) } }) })</script></head><body><div id="nav"><div class="navsbox"><div class="firstnav">购物特权</div><ul><li class="jedh"><a href="#">全额兑换</a></li><li class="jlbbyk"><a href="#">俱乐部包邮卡</a></li><li class="jwljb"><a href="#">购物领金币</a></li><li class="mrljb"><a href="#">每日领金币</a></li><li class="vipjtj"><a href="#">vip阶梯价</a></li></ul></div></div></body></html>
以上就是hover的一个实例教程的详细内容。