老师如何设置才能将按钮中的文字显示出来，而且背景为透明色

慕沐0220913 2019-12-12

源自：前端油画商城案例 4-3 项目作业

收起

2回答

好帮手慕小尤回答被采纳获得+3积分 2019-12-12 18:39:55

同学你好，同学根据input标签为按钮设置滑过样式即可，建议同学删除.ABOUT .middle .left .explore .butt:hover代码，并将.ABOUT .middle .left .explore input:hover代码中的中文字符，修改为英文字符。修改后代码如下：

.ABOUT .middle .left .explore input:hover{ 
    color:black; /* 设置字体颜色为黑色*/
    border:1px solid black; /* 设置边框*/
    background:transparent; /* 将中文字符（：）修改为英文字符(:)*/
}

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

好帮手慕小尤 2019-12-12 16:39:43

同学你好，同学描述的是否鼠标滑过时，改变背景色与字体颜色。如果是同学可使用:hover以及background、color，代码如下：

:hover{
	color:black;
	border:2px solid black;
	background:transparent;
}

如果不是，请同学重新描述一下。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者慕沐0220913 #1

老师是鼠标滑过时鼠标移入时背景变为透明的，但是有黑色的边框

2019-12-12 18:11:29
好帮手慕小尤回复提问者慕沐0220913 #2

同学你好，在上面代码中通过border属性为按钮设置边框，所以当鼠标移入时，有黑色的边框（代码：border:2px solid black;）如何还存在问题，请同学反馈代码。如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

2019-12-12 18:18:38
提问者慕沐0220913 回复好帮手慕小尤 #3

<div class="middle"> <ul>  <li> <div class="left"> <div class="word"> <h2>A WORD ABOUT US</h2> </div> <div class="explore"> <p>Praesent dignissm viverra eat. sed bibendum ligula congue non. Sed ac isi et frlis gravida commodo? Suspendisse eget ullamcorper ipsum .Supendisse diam amet.</p> <div class="butt"> <input type="button" name="" value="EXPLORE"> </div> </div> </div> </li> .ABOUT .middle .left .explore input{ height:40px; width:86px; background-color: black; color: white; } .ABOUT .middle .left .explore .butt{ height:40px; width:86px; margin-top:15px; margin-bottom: 10px; } .ABOUT .middle .left .explore .butt:hover{ border:1px solid black; /*color: */ } .ABOUT .middle .left .explore input:hover{ /*opacity: 0.1;*/ background：transparent; } 老师就是想当鼠标滑过按钮时，按钮背景变成透明《透明的》，有黑色边框，而且按钮中字体颜色变成合适

2019-12-12 18:27:25