87,910
社区成员
发帖
与我相关
我的任务
分享怎样实现Html标签背景颜色重叠内联a元素高亮显示
效果就是天猫页面右侧黑色 请登录 高亮显示效果，求大神提供案例代码，下面是我做的重叠 但是链接a（点击进入）元素 无法高亮显示 求高手给予帮助！谢谢
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;padding:0;
}
img{
border:0;
}
.pic{
width:125px;height:63px;position:relative;z-index:100;background-color: black;
}
.people{
width:125px;height:63px;position:absolute;background-color:deepskyblue;
top:0;left:0;opacity:0;
}
.people span{
color:#fff;text-align:center;height:30px;display:inline-block;
}
.people a{
display:inline-block;color:#ffffff;text-decoration:none;width:80px;height:24px;
text-align: center;border-radius:7px;background-color:#c40000;position:absolute;
left:20px;top:30px;
}
.people:hover{
background-color:#00ce98;opacity:0.7;
}
</style>
</head>
<body>
<div class="pic">
<!--<img src="images/ttt.jpg">-->
<div class="people">
<span>关注人数56.8万</span>
<a href="">点击进入</a>x
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;padding:0;
}
img{
border:0;
}
.pic{
width:125px;height:63px;position:relative;z-index:100;background-color: black;
}
.people{
width:125px;height:63px;position:absolute;background-color:deepskyblue;
top:0;left:0;opacity:0;
}
.people span{
color:#fff;text-align:center;height:30px;display:inline-block;
}
.people a{
display:inline-block;color:#ffffff;text-decoration:none;width:80px;height:24px;
text-align: center;border-radius:7px;background-color:#c40000;position:absolute;
left:20px;top:30px;
}
.people:hover{
background-color:#00ce98;opacity:0.7;
}
</style>
</head>
<body>
<div class="pic">
<!--<img src="images/ttt.jpg">-->
<div class="people">
<span>关注人数56.8万</span>
<a href="">点击进入</a>x
</div>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
yytaiji38224 2016-08-21
- 打赏
- 举报
新疆这边 我 不知道 为啥 图片上传 不了 大神 能不能 给QQ 就是 天猫 导航阿里旅行 右下侧的 请登录 难道没有看到吗? 很明显 高亮红色显示 我就要那个效果 还有 就是 下面 一堆 牌子的 小图标 什么李宁 小米 之类的 鼠标 移动上去 不是有个 红色 的点击进入 大神不会 不逛天猫 吧
天际的海浪 2016-08-21
- 打赏
- 举报
天猫https://www.tmall.com/ 没看到你说的效果。不清楚你要的什么效果。你发个截图
天际的海浪 2016-08-21
- 打赏
- 举报
加上
.people a:hover{
background-color:#ffff00;
}
yytaiji38224 2016-08-21
- 打赏
- 举报
不行的 改成 你写 的 <div class="pic">的 背景黑色 <a href="">点击进入</a>颜色变了 相当于 三层颜色 重叠 直接 变色 了 我可能没有表达清楚 天猫轮播图 右边的 黑色条框里面的 请登录 请你 仔细观察一下 打开网页的时候就是高亮 红色 我的另一个问题就是我 贴出来的这个代码 鼠标移动上去a 链接高亮显示红色 你的方法我试验了一下 因为三层颜色的叠加 已经 变色 我想要的是每层颜色都是独立的 其实问题的核心 就是保持每层颜色 独立 a标签颜色 高亮显示 希望能指点迷津
