我页面的很多功能(文字)包括css hover和active。
BUT
只有当我第一次将鼠标悬停在某个似乎触发其他单词的单词上时,它们才会起作用。
为什么会这样?
在我的情况下,#input1有一个活动部分,当点击边框时会改变颜色。 但是,只有将光标悬停在页脚文本上,这才会起作用。
谢谢!
詹姆斯
这是html:
<html>
<head>
<link href="cloud.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center1"style="margin-top: 300px;">
<form>
<input type="text" class="input1" autofocus="autofocus">
<input type="text" class="input2">
</div>
<div class="footer" style="position:absolute;bottom:0;">
<div class="footer1">
<div id="footer1text">
<a href="aboutus.html " style="text-decoration:none;">About Us</a></div>
<div id="footer1text">Accessibility</div>
<div id="footer1text">Recruiters</div>
<div id="footer1text">Contact Us</div>
</div>
<div class="footer2">
<div id="footer2textcopyright">© 2011 -</div>
<div id="footer2text">Privacy</div>
</div>
</div>
</body>
</html>
的CSS:
body {
margin: 0;
padding: 0;
}
input:focus {
outline: none;
}
.center div {
display:inline-block;
}
.center {
text-align:center;
width:100%px;
margin:0 auto;
}
.center1 div {
display:inline-block;
}
.center1 {
text-align:left;
width:1200px;
text-align:center;
width:100%px;
margin:0 auto;
}
.footer {
background: #FFFFFF;
border-top: 1px solid;
color: #e6e6e6;
height: 30px;
width: 100%;
position:absolute;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
display: table;
}
.footer1 {
background: #FFFFFF;
height: 30px;
width: 350px;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
display:table;
}
#footer1text2 {
font: 13px helvetica;
color: #0040FF;
display: table-cell;
}
.clickhere {
font: 13px helvetica;
color: #0040FF;
text-decoration: underline;
}
#footer1text2:hover {
font: 13px helvetica;
color: #0040FF;
text-decoration: underline;
}
#footer1text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
}
#footer1text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
.footer2 {
background: #FFFFFF;
height: 30px;
width: 130px;
float: right;
margin: 0px 0px 0px 0px;
padding:0;
display:table;
}
#footer2text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
text-align: right;
}
#footer2text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
#footer2textcopyright {
font: 13px helvetica;
color: #151515;
padding: 8px 3px 3px 3px;
display: table-cell;
text-align: right;
}
.input1 {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #bdbdbd;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
.input1:active {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #e6e6e6;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
.input2 {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #bdbdbd;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
答案 0 :(得分:2)
您希望input1:active
像[{1}}
变化:
.input1:focus
为:
.input1:active {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #e6e6e6;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
PS
修复您的代码,您需要关闭该表单标记,并且应该对您的输入执行相同的操作。此外,代码中的样式声明之间应该有一个空格
.input1:focus {
outline: none;
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #e6e6e6;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}