1
在我设计的网页上，样式表包含一个a:hover选择器，当光标悬停在它们上方时，我正在使用该选择器为链接指定不同的颜色。当我将鼠标悬停在它们上方时，不仅颜色不会改变，在Firefox的检查元素窗口的“规则”选项卡中，a:hover选择器不会出现。这里有一个供参考的片段。点击页面顶部的小图片缩略图后，会显示相关链接。这：悬停选择器没有被应用 - 为什么？
function main() {
$('#arrow').click(function(){
$('#dropdown').animate({
top: '200px'
}, 400);
$('#menu').animate({
top: '75px'
}, 400);
$('#slide-wrapper').animate({
marginTop: '250px'
}, 400);
$(this).attr('src','uparrow.jpg');
$(this).off();
$(this).click(function(){
$('.hidden').animate({
top: '-=250'
}, 400);
$('#slide-wrapper').animate({
marginTop: '0px'
}, 400);
$(this).attr('src','downarrow.jpg');
$(this).off();
main();
});
});
}
$(document).ready(main);body {
font-family: sans-serif;
padding: 0px;
margin: 0px;
background-image: url("background.jpeg");
background-attachment: fixed;
}
/* Menu elements */
.hidden {
z-index: -5;
top: -50px;
position: absolute;
}
#arrow {
margin-left: auto;
margin-right: auto;
height: 50px;
width: 50px;
display: block;
cursor: pointer;
}
#arrow-box {
background-color: white; /* FOR NOW */
}
#banner {
background-color: #9CAD9D; /* For now, until I get some pictures in */
width: 100%;
height: 200px;
margin: 0px;
padding: 0px;
top: 0px;
}
#banner-border {
width: 100%;
height: 20px;
top: 180px;
position: absolute;
text-align: center;
color: #245F27;
letter-spacing: 1px;
font-size: 10pt;
}
#dropdown {
height: 300px;
width: 100%;
}
#transground {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.menu {
float: left;
color: #006607;
margin: 15px;
z-index: 1;
font-size: 16pt;
letter-spacing: 3px;
}
.menu-item {
margin-bottom: 10px;
}
/* Fonts and such */
h1 {
color: white;
padding-top: 50px;
margin: 0px;
text-align: center;
}
ul {
margin: 0px;
}
.unstyled {
list-style-type: none;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a:hover {
color: white;
}
/* General structural elements */
#content {
width: 75%;
height: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding: 10px;
background-color: white;
}
#slide-wrapper {
z-index: -10;
}
/* Footer stuff: Contact form will need a media query to help it fit in the screen in mobile. Or maybe remove it? */
footer {
height: 400px;
background-color: #9CAD9D; /* FOR NOW */
}
#footer-border {
background-color: #165413;
width: 100%;
height: 20px;
}
.right {
float: right;
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
width: 50%;
}
.left {
padding: 10px;
display: inline-block;
}
@media screen and (max-width: 410px) {
.left {
display: block;
}
.right {
float: none;
}
/* Still can't get the form to fit the screen -- it floats to the right. */
}
.fields {
float: left;
padding: 2px;
}
label {
padding-right: 5px;
}
#message {
height: 150px;
}
form {
margin-left: auto;
margin-right: auto;
width: 250px;
line-height: normal;
}
input, textarea {
width: 200px;
padding: 0px;
margin: 0px;
float: right;
}
.button {
width: auto;
cursor: pointer;
}
#copy {
text-align: center;
background-color: #9CAD9D; /* Same as footer */
margin: 0px;
padding-bottom: 20px;
display: block;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div id="banner">
<h1>Company Name Placeholder</h1>
<div id="banner-border">CLICK THE ARROW</div>
</div>
<div id="dropdown" class="hidden">
<div id="transground"></div>
<ul id="menu" class="menu hidden unstyled">
<li class="menu-item"><a href="index.html">HOME</a></li> <!-- HORIZONTAL OR VERTICAL? -->
<li class="menu-item"><a href="#">ABOUT ME</a></li>
<li class="menu-item"><a href="#">GET A WEBSITE</a></li>
<li class="menu-item"><a href="#">PORTFOLIO</a></li>
</ul>
</div>
<div id="arrow-box">
<img id="arrow" src="downarrow.jpg"/>
</div>
<div id="slide-wrapper">
<div id="content">
Page content will go here.
</div>
<footer>
<div id="footer-border"></div>
<div class="left">
This will be about customers contacting me, etc.
</div>
<div class="right">
<form id="contact" method="post" action"mail.php" accept-charset="UTF-8">
<ul class="fields unstyled">
<li class="fields"><label for="name">Full Name</label></li>
<li class="fields"><input name="name" type="text" maxlength=50 placeholder="Your Name" required=""></input></li>
<li class="fields"><label for="email-address">E-Mail</label></li>
<li class="fields"><input type="email" name="email-address" maxlength=50 placeholder="[email protected]" required=""></input></li>
<li class="fields"><label for="subject">Subject</label></li>
<li class="fields"><input name="subject" type="text" maxlength=50 required=""></input></li>
<li class="fields"><label for="message">Message</label></li>
<li class="fields"><textarea id="message" name="message" maxlength=1000 required=""></textarea></li>
<li class="fields"><input class="button" type="submit" value="Send" name="submit"></input></li>
</ul>
</form>
</div>
</footer>
<p id="copy">© 2015 - Evan Dempsey</p>
</div>
<!-- Scripts down here -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="menu.js"></script>
<script type="text/javscript">
//This is supposed to be to fit the copyright thing underneath the contact form when the browser is ~ iPad size.
</script>
</body>
</html>帮助，将不胜感激，我想知道为什么这并不适用。此外，a选择器下的cursor: pointer;规则似乎不起作用。
作为一般性建议，只发布与问题直接相关的代码。它减少了人员，它使你的问题更容易解析。 – Aeolingamenfel