关于a标签点击Focus状态下背景颜色区域不够的问题

想要点击a标签之后改变背景颜色的参数，但是发现背景颜色只改变了很小的一部分：

原代码如下：

header ul{display: inline-block;
}
header li{float: left;padding: 0 8px;line-height: 36px;
}
header a:focus{background-color: #5090f5;color: white;font-weight: bold;
}

导致这种情况分为两个方向：即横向和纵向。

横向是因为padding给的值撑开的是li标签而不是a标签，但是focus是a标签的状态，解决方案是把padding参数给到a标签里，代码如下：

header ul{display: inline-block;
}
header li{float: left;line-height: 36px;
}
header a{padding: 0 8px;
}
header a:focus{background-color: #5090f5;color: white;font-weight: bold;
}

可以得到以下效果：

纵向的原因是a标签是内联标签，所以标签的高度由内容撑开，想要获得完整高度则将它转换为行内块标签并且给上相应的高度，代码如下：

header ul{display: inline-block;
}
header li{float: left;line-height: 36px;
}
header a{padding: 0 8px;display: inline-block;height: 36px;
}
header a:focus{background-color: #5090f5;color: white;font-weight: bold;
}

可以得到如下效果：

关于a标签点击Focus状态下背景颜色区域不够的问题相关推荐

浏览器全屏状态下背景颜色设置
浏览器全屏状态下背景颜色设置: :-webkit-full-screen { background-color: @content-bg !important; } :-moz-full-screen ...
html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
去掉Element复选框点击出现的蓝色背景颜色
今天练习Vue的购物车案例,复选框选中的背景颜色要为蓝色.虽然网上有教怎么修改复选框选中时的背景颜色,但俺想顺便练习下怎么使用ElementUI嘿嘿嘿(其实是想偷懒,嘘!!!) 然鹅在点击的时候总出现 ...
html里面a标签点击时去除下划线
html代码: <a href="#">这里是A标签</a> CSS样式: a:link{text-decoration:none; } /* 指正常的未 ...
在Android使用XML文件控制按钮文字在各种状态下的颜色
最近在项目中遇到新的需求,就是在按钮在选按的时候需要将文字变为白色,但android默认的按钮颜色为黑色,之前也没有考虑过类似的问题. 通过doc文档,发现按钮文字的处理方式和背景的处理方式很相似,同 ...
JavaScript DOM操作案例点击按钮修改ul背景颜色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue点击菜单跳转时，背景颜色动态变化
** vue点击菜单跳转时,背景颜色动态变化 ** html: script: export default { name: "menu", data() { return { a ...
[JavaScript]搜索框中文/英文/拼音匹配过滤逻辑/input的focus和下拉框的click冲突解决/点击条目后focus二次点击不生效问题解决
效果图思路: 输入框的逻辑: 要监控input的输入,根据框架自己选择绑定事件要有focus和blur的方法,input的focus和下拉框的click冲突的话应该用mousedown 展开下拉框 ...
android可以有一个悬浮窗口在进入屏保状态显示,点击进入应用,Android如何实现锁屏状态下弹窗...
前言想在锁屏上面实现弹窗,第一个想法就是利用 WindowManager设置 Window的 Flag,通过设置 Flag的显示优先级来让窗口显示在锁屏的上面. 接下来就是试验可能相关的 Windo ...

关于a标签点击Focus状态下背景颜色区域不够的问题

关于a标签点击Focus状态下背景颜色区域不够的问题相关推荐

最新文章

热门文章