老师 ABOUT区 EXPLORE按钮 悬停时候 字体也变成了白色 怎么让字体变黑色啊
来源：4-3 项目作业
昵称加载中__
2019-09-21 16:51:37
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/作业.css"> </head> <body> <div class="dingbu"> <div class="logo"> <img src="images/logo.png"> </div> <div class="menu"> <div class="title"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FACULTY</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </div> <div class="banner"> <div class="form"> <form> <!-- placeholder默认提示 --> <input type="text" name="" class="text1" placeholder="your Name" ><br> <input type="text" name="" class="text1" placeholder="your Phone"><br> <input type="text" name="" class="text1" placeholder="your Email"><br> </form> <!-- 多行文本框 高度rows 宽度cols --> <textarea rows="10" cols="55" class="text2" placeholder="Write Your Comment Here"></textarea><br> <!-- 提交按钮 --> <input type="submit" name="" class="text3" value="SEND MESSAGE" > </div> <div class="img"> <img src="images/banner3.jpg"><br> </div> </div> <div class="ABOUT"> <div class="biaoti"> <h2 class="h1">ABOUT</h2><br> </div> <div class="border"></div> <div class="P1"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry.Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</p> </div> <div class="h2"><h3>A WORD<br> ABOUTUS</h3></div> <div class="p2"><p> Praesnt dignissm viverra est,sed<br> bibendum ligula congue non.Sed ac nisl<br> et felis gravida commodo? Suspendisse<br> eget ullamcorper ipsum. Suspendisse<br> diam amet.<br> <input type="submit" name="" class="text4" value="EXPLORE"> </p></div> </div> <div class="GALLERY"></div> <div class="footer"></div> </body> </html>
*{
padding: 0px;
margin: 0px;
}
.dingbu{
background-color: #07cbc9;
width: 100%;
height: 80px;
}
.dingbu .menu .title{
position: absolute;
margin-top: -52px;
margin-left: 1000px;
overflow: hidden;
}
/* 设置行高 */
.dingbu .menu .title ul li{
float: left;
list-style: none;
margin-left: 10px;
line-height: 80px;
}
/* 鼠标经过变黑色:hover{background-color: #000;}*/
.dingbu .menu .title ul li a:hover{
background-color: #000;
}
/* text-decoration: none;去掉超级链接的下划线 display将a标签设置为块级元素 */
.dingbu .menu .title ul li a{
color: #ffffff;
text-decoration: none;
font-family:"Microsoft YaHei UI";
display: block;
padding: 0 10px;
font-size: 20px;
}
.dingbu .logo{
margin-left: 100px;
}
.banner{
width:100%;
height: 500px;
position: absolute;
}
/* 设置表单form */
.banner .form{
margin-left: 40%;
margin-top: 80px;
line-height: 60px;
position: absolute;
z-index: 50;
}
/* 表单 */
.banner .form .text1{
width: 400px;
height: 30px;
background: transparent;
border: 2px solid #fcfff9;
outline: none;
}
/* 鼠标移动到边框变颜色 */
.banner .form .text1:hover{
border-color:#07cbc9;
}
/* 多行表单 */
.banner .form .text2{
margin-top: 20px;
background: transparent;
border: 2px solid #fcfff9;
}
/* 鼠标移动多行表单边框变色 */
.banner .form .text2:hover{
border-color:#07cbc9;
}
/* 按钮 */
.banner .text3{
background: transparent;
width: 180px;
height: 50px;
margin-left: 30%;
border: 2px solid #fcfff9;
color: #fff;
}
/* 鼠标移动到按钮变色 */
.banner .text3:hover{
background-color: #07cbc9;
}
.banner .img{
position: relative;
z-index: 10;
}
.banner img{
width: 100%;
height: 600px;
}
.ABOUT{
position: relative;
text-align: center;
width: 1163px;
margin-top: 650px;
margin-left: 20%;
}
.ABOUT h2{
font-size: 3em;
}
/* 下划线 */
.ABOUT .border{
border-bottom: 3px solid #07cbc9;
width: 40px;
margin-left: 48%;
}
/* P1段落设置*/
.ABOUT .P1{
color: #07cbc9;
padding-top: 33px;
padding-bottom: 33PX;
}
/* p2段落边框设置 */
.ABOUT .p2{
border: 2px solid #07cbc9;
width: 400px;
background-color: transparent;
text-align: left;
height: 200px;
}
.ABOUT .p2 p{
margin: 15px;
line-height: 20px;
}
/* 按钮设置 */
.ABOUT .p2 input{
background-color: black;
color: #FFF;
border: 3px solid black;
height: 40px;
width: 100px;
margin-top: 15px;
}
.ABOUT .p2 input:hover{
background-color:transparent;
}写回答
1回答
-
好帮手慕查理
2019-09-22
您好，鼠标经过时同时设置字体颜色为黑色。
.ABOUT .p2 input:hover{ background-color:transparent; color:#000; }祝学习愉快！
0
相似问题