CSS Hover будет работать только на странице, если сначала навести курсор на определенное слово.Зачем? - PullRequest
Новая
       17

CSS Hover будет работать только на странице, если сначала навести курсор на определенное слово.Зачем?

0 голосов
/ 10 ноября 2011

Множество функций моей страницы (текст) включают css hover и active.

НО

Они будут работать, только если я сначала наведу курсор на определенное слово, которое, кажется, вызывает другие.

Почему это так?

В моем случае # 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">

&nbsp;&nbsp;&nbsp;<div id="footer1text">
<a href="aboutus.html " style="text-decoration:none;">About Us</a></div>
&nbsp;&nbsp;&nbsp;<div id="footer1text">Accessibility</div>
&nbsp;&nbsp;&nbsp;<div id="footer1text">Recruiters</div>
&nbsp;&nbsp;&nbsp;<div id="footer1text">Contact Us</div>
</div>
<div class="footer2">
&nbsp;&nbsp;&nbsp;<div id="footer2textcopyright">&copy; 2011 -</div>
<div id="footer2text">Privacy</div>&nbsp;&nbsp;&nbsp;

</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;
}

1 Ответ

2 голосов
/ 10 ноября 2011

вы ожидаете, что input1:active будет работать как .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;
}

до: 

.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;
}

PS

Исправьте ваш код, вам нужно закрыть этот тег формы и, вероятно, сделать то же самое с вашими данными. Также в вашем коде должен быть пробел между объявлениями стилей 

<div class="center1" style="margin-top: 300px;">  <!-- added space between class and style declarations -->
  <form>
    <input type="text" class="input1" autofocus="autofocus" /> <!-- close with slash -->
    <input type="text" class="input2" /> <!-- close with slash -->
  </form>  <!-- close the form -->
</div>
...