li:hover{border:1px solid #ddd}
不过这样的伪类，ie6、7不支持。
若要兼容性，只有通过js去写。例如：
先定义一个样式名是带边框的
.hover{border:1px solid #ddd}
<LI onmouseover="this.className='hover'" onmouseout="this.className=''" >当鼠标放在</li>
但是这样非常麻烦，因为每个li都要写。所以还有更好的做法。
<ul id="rank">
<li>当鼠标放在上时周边出现边框</li>
<li>当鼠标放在上时周边出现边框</li>
<li>当鼠标放在上时周边出现边框</li>
<li>当鼠标放在上时周边出现边框</li>
</ul>
<script>
var aa=document.getElementById("rank").getElementsByTagName("li")
for(var i=0i<aa.lengthi++){
aa[i].onmouseover=function(){
this.className=this.className+" hover"
}
aa[i].onmouseout=function(){
var cn=this.className
this.className=cn.replace(" hover","")
}
}
</script>
纯手打，望采纳。
这个只要将元素样式的hover伪类设置边框即可。
<!DOCTYPE html><html lang="en">
<head>
<style>
.div-style1
{
width: 200px
height: 200px
background-color: red
float: left
}
.div-style2
{
width: 200px
height: 200px
background-color: darkgray
float: left
margin-left: 20px
}
.div-style1:hover
{
width: 200px
height: 200px
background-color: red
border: 5px solid black
}
.div-style2:hover
{
width: 200px
height: 200px
background-color: darkgray
-webkit-box-shadow: 0 0 8px black
-moz-box-shadow: 0 0 8px black
box-shadow: 0 0 8px black
}
</style>
<meta charset="UTF-8">
<title>标题一</title>
</head>
<body>
<div class="div-style1">
移上去显示黑框
</div>
<div class="div-style2">
移上去显示阴影
</div>
</body>
</html>
以上就是鼠标移动到元素上显示黑框的一个实例。做了两个效果，一个是边框，一个是阴影。
<style>.img:hover{border:1px solid red}
</style>
<img src="此处输入图片地址" class="img" />
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）