61,112
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
fgccvv 2016-06-23
- 打赏
- 举报
[/quote]
.nav a:hover, .nav a:active{ color:#e4df47; background-image:url(.....); background-repeat:no-repeat; background-position:center bottom; }
浪子回头8 2016-06-22
- 打赏
- 举报
两张背景图片即可，一张没箭头，一张有箭头
cocotsau 2016-05-25
- 打赏
- 举报
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>style demo</title>
<style>
body{
margin: 0;
padding: 0;
background-color: #999;
}
ul,li{list-style-type: none;}
ul{width: 980px; margin: 20px auto; height: 35px;}
li{
float: left;
color: #fff;
cursor: pointer;
font: bold 13px Aria;
letter-spacing: 0.18em;
padding: 5px 15px;
margin: 0 5px;
width: 80px;
height: 25px;
line-height: 25px;
position: relative;
text-align: center;
overflow: hidden;
background: linear-gradient(180deg, #1C776F, #666);
box-shadow: -1px -2px 1px 0 #ccc inset;
border-top: 1px solid #ccc;
border-radius: 15px;
transition: color .4s ease;
}
li::after{
content: "";
position: absolute;
width: 10px;
height: 10px;
transform: rotate(45deg);
background-color: #ECEC4C;
bottom: -4px;
left: 50px;
opacity: 0;
transition: opacity .4s ease;
}
li:hover{
color: #ECEC4C;
}
li:hover::after{
opacity: 1;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</body>
</html>
风中的驻足k 2016-05-25
- 打赏
- 举报
cocotsau 2016-05-25
- 打赏
- 举报
实现的方法很多，推荐用伪类
现在天猫或者京东商品分类模块的默认的效果是这样的：
当鼠标滑过任意一栏导航分类时，就会出现相关详细分类模块，例如：
当鼠标移出蓝色框以外的区域，就会恢复默认的效果显示！然而使用jQuery的鼠标滑过事件，用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法，但是一直调整都调整不到想要的效果！后来灵光一现，想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了！
我的布局大致是这样的：
