这个：悬停选择器没有被应用 - 为什么？

时间：2015-09-04 15:13:58

标签： html css hover

在我正在设计的网页上，样式表包含一个a:hover选择器，当光标悬停在它们上面时，我用它来为某些链接提供不同的颜色。当我将鼠标悬停在它们上面时，不仅在＆＃34;规则＆＃34;中不会改变颜色。 Firefox的检查元素窗口的选项卡，a:hover选择器不会出现。这是一个可供参考的片段。单击页面顶部的小图像缩略图后，将显示相关链接。

＆＃13;
＆＃13; 
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);
＆＃13; 
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;
}
＆＃13; 
<!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="you@example.com" 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">&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>
＆＃13;
＆＃13;
＆＃13;

帮助将不胜感激，我想知道为什么这不适用。此外，cursor: pointer;选择器下的a规则似乎无法正常工作。

3 个答案:

答案 0 :(得分：0)

问题是，有些a父母有.hidden个类，.hidden类的元素有属性z-index: -5，我认为。

解决问题的一种方法可能是在jQuery动画完成后更改z-index属性

答案 1 :(得分：0)

你有Z索引的问题：除非你清楚地了解你在做什么，否则不要使用负z索引（来自Philip Walton的this article非常好）。并查看position和z-index的关联方式。

使用此CSS样式表应该是解决问题的一种方法：

body {
    font-family: sans-serif;
    padding: 0px;
    margin: 0px;
    background-image: url("background.jpeg");
    background-attachment: fixed;
}


/* Menu elements */

.hidden {
    top: -50px;
    position: absolute;
    z-index: 1;
}

#arrow {
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    width: 50px;
    display: block;
    cursor: pointer;
}

#arrow-box {
    background-color: white;
    /* FOR NOW */
    z-index: 10;
    position: relative;
}

#banner {
    background-color: #9CAD9D;
    /* For now, until I get some pictures in */
    width: 100%;
    height: 200px;
    margin: 0px;
    padding: 0px;
    top: 0px;
    z-index: 10;
    position: relative;
}

#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: 5;
    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;
}

答案 2 :(得分：0)

您需要在下拉列表ID中添加z-index:99，因为链接位于其他元素下方。

相关问题
最新问题