我有这部分HTML代码:
function mostralogin() {
$("#div-login").fadeToggle("fast");
}

header {
height: 50px;
background-color: #ececec;
position: fixed;
right: 0px;
left: 0px;
box-shadow: 0px 5px 5px #b2b2b2;
-moz-box-shadow: 0px 5px 5px #b2b2b2;
-webkit-box-shadow: 0px 5px 5px #b2b2b2;
display: block;
}
#div-login {
width: 200px;
height: 180px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px;
border: 3px solid #4F9D97;
margin-left: 84%;
margin-top: 48px;
position: absolute;
display: none;
color: white;
text-align: center;
font-weight: bold;
}
#logintext {
color: #4F9D97;
font-size: 20px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
#logintext:hover,
#logintext:active {
border-bottom: 1px solid #4F9D97;
}
#regtext {
color: #4F9D97;
font-size: 20px;
float: right;
margin-top: 10px;
margin-right: 5px;
}
#regtext:hover,
#regtext:active {
border-bottom: 1px solid #4F9D97;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<a id="regtext"> REGISTRAZIONE </a>
<a id="logintext" onclick="mostralogin()"> LOGIN </a>
<form name="login" id="div-login" action="../PHP/login.php" method="post">
... (form stuffs) ...
</form>
</header>
&#13;
当我点击“登录”这个词时,它应显示为隐藏的表单,一切正常,直到我在float: right
标签的css文件上应用<a>
。到目前为止,mostralogin()
JQuery函数以及:hover
和:active
内容已不再适用。为什么会这样?
答案 0 :(得分:0)
这是最终的解决方案! HTML部分:
<header>
<div id="textcont">
<a id="logintext" onclick="mostralogin()"/>LOGIN</a>
<a id="regtext" onclick="mostralogin()" />REGISTRAZIONE</a>
</div>
<form name="login" id="div-login" action="../PHP/login.php" method="post">
... (form stuffs) ...
</form>
</header>
CSS部分:
header {
height: 50px;
background-color: #ececec;
position: fixed;
right:0px;
left:0px;
box-shadow: 0px 5px 5px #b2b2b2;
-moz-box-shadow: 0px 5px 5px #b2b2b2;
-webkit-box-shadow: 0px 5px 5px #b2b2b2;
display: block;
text-align:right;
}
#logintext {
color:#4F9D97;
font-size:20px;
margin-right: 20px;
}
#logintext:hover, #logintext:active {
border-bottom: 1px solid #4F9D97;
}
#regtext {
color:#4F9D97;
font-size:20px;
margin-right: 20px;
}
#regtext:hover, #regtext:active {
border-bottom: 1px solid #4F9D97;
}
#textcont {
margin-top: 10px;
}