css小技巧,菜单栏按钮hover样式与按钮默认样式冲突

野性酷女 2021-07-04 18:48 870阅读 1赞

![在这里插入图片描述][20191028113226132.png]

蓝色背景是默认样式，灰色背景是`hover`样式。

初写菜单栏时，代码夸夸夸一顿敲。发现把鼠标移到蓝色按钮上去也变成了灰色。

其实这个时候只需要在蓝色背景后面加上 `!important` 把优先级提到最高。

就会发现`hover`背景和默认背景不会冲突了。

.btn{ 
        /*按钮样式请参考我的另一篇文章*/
    }
    .btn-cur{ 
        background: #5DCBFF !important;
    }
    .btn:hover{ 
        background: #ccc;
    }

## 一个简单的菜单`hover`效果 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css"> body,html{ padding: 0; margin: 0; width: 100%; height: 100%; } ul li{ position: relative; float: left; list-style: none; width: 100px; height: 50px; background: #ccc; margin-left: 50px; } ul:after{ content: ""; display: block; clear: both; } li:before{ content: ""; position: absolute; left: 50%; top: 100%; height: 3px; background: aqua; width: 0; transition: all .8s; } li:hover:before{ left: 0; width: 100%; } </style>
    	</head>
    	<body>
    		<ul>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ul>
    	</body>
    </html>

## 如图： ##

![在这里插入图片描述][20191028113136387.png]

[20191028113226132.png]: /images/20210704/bfdff773c02b458780da721ffb3c4808.png
[20191028113136387.png]: /images/20210704/a336bf9f35cc4557a00caab0639d48ed.png

发表评论取消回复

表情：

评论列表（有 0 条评论，870人围观）

还没有评论，来说两句吧...

相关阅读

相关清除uniapp button按钮默认样式

清除uniapp button按钮默认样式（去掉边框） button::after { border: none; } hover-

绝地灬酷狼/ 2023年07月21日 05:59/ 0 赞/ 25 阅读

相关 element 按钮样式：确认按钮发布后样式发生改变

场景：确认按钮发布后样式发生改变，发布后，点击确认按钮，背景色消失，添加红色focus即可 <el-button type="text" class=

╰半橙微兮°/ 2023年07月01日 08:45/ 0 赞/ 39 阅读

相关 html简约按钮样式,简约CSS按钮样式设计+文字特效

标签：按钮： .blog-but\{ /\ 按钮美化 \/ width: 270px; /\ 宽度 \/ height: 40px; /\ 高度 \/ border

￡神魔★判官ぃ/ 2022年10月10日 09:47/ 0 赞/ 257 阅读

相关 CSS3样式控制input按钮效果

.clearfix:before, .clearfix:after { display: table; content: " ";

待我称王封你为后i/ 2022年09月25日 12:21/ 0 赞/ 278 阅读

相关 CSS去掉iPhone、iPad的默认按钮样式

input\[type="button"\], input\[type="submit"\], input\[type="reset"\] \{ \-webkit-

待我称王封你为后i/ 2022年07月12日 04:16/ 0 赞/ 236 阅读

相关 CSS样式实现选择按钮

CSS样式实现选择按钮表单元素中的选择按钮的原生样式并不好看，在实际项目中需要优化。很多优化的方法都用CSS美化按钮的原生样式，或用图片来代替原生样式。本文描述了使用C

秒速五厘米/ 2022年06月13日 06:24/ 0 赞/ 370 阅读

相关 css 按钮按下样式

在项目开发中，按钮通常需要添加按钮的获得焦点状态，电脑端用 :hover 移动端用 :active 。多个按钮需要添加时，就得添加多个获得焦点样式。可通过添加背景图片的方式

布满荆棘的人生/ 2022年02月20日 05:17/ 0 赞/ 539 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 417 阅读

相关 input按钮上传按钮样式

主要是定位和不透明度来实现： <!DOCTYPE html> <html lang="en"> <head> <meta charse

╰半夏微凉°/ 2021年12月17日 09:37/ 0 赞/ 483 阅读

相关 css小技巧,菜单栏按钮hover样式与按钮默认样式冲突

![在这里插入图片描述][20191028113226132.png] 蓝色背景是默认样式，灰色背景是`hover`样式。初写菜单栏时，代码夸夸夸一顿敲。发现把鼠标移到蓝

野性酷女/ 2021年07月04日 18:48/ 1 赞/ 871 阅读