卡阴影效果不起作用（由于悬停不起作用）

Question

我正试图获得卡片（'。card'，'。card p'和'.card p：hover'类）在用光标悬停它们后使它们的阴影变暗，遗憾的是没有发生任何事情。导航栏的悬停功能可以正常工作。当你滚动时，javascript代码用于使导航栏跟随你。如果有人有足够的空闲时间来帮助我解决这个问题，那么谢谢。

还有另一个问题：如果您在chrome中运行代码并最大化窗口，则无法滚动到最底部（使用Windows 10）。如果你也可以解决这个问题，那么谢谢。

$(function() {
  // Stick the #nav to the top of the window
  var navigation = $('.navigation');
  var navigationHomeY = navigation.offset().top;
  var isFixed = false;
  var $w = $(window);
  $w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navigationHomeY;
    if (shouldBeFixed && !isFixed) {
      navigation.css({
        position: 'fixed',
        top: 0,
        left: 0,
        marginright: 0
      });
      isFixed = true;
    } else if (!shouldBeFixed && isFixed) {
      navigation.css({
        position: 'relative',
        left: 0,
        marginright: 0
      });
      isFixed = false;
    }
  });
});

{
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0%;
  font-family: Helvetica;
}

.header {
  position: relative;
  left: 0px;
  right: 0px;
  top: 0px;
  font-size: 187%;
  text-align: left;
  padding: 1.5%;
  background-color: #cccccc;
  color: white;
  z-index: 1;
}

.card {
  position: relative;
  margin-right: 2%;
  margin-left: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  z-index: -2;
}

.card p {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  transition: 0.3s;
}

.card:hover p {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  color: blue;
}

.navigation {
  list-style-type: none;
  position: relative;
  left: 0px;
  margin-right: 0px;
  width: 100%;
  top: 7.2%;
  background-color: #cccccc;
  box-shadow: 0px 3px 25px grey;
  z-index: 0;
}

.wrap {
  margin: 10px auto;
  background: #cccccc;
  padding: 10px;
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
}

.navWrap {
  height: 30px;
  width: 100%;
  z-index: 0;
}

.li a {
  float: left;
  display: block;
  text-align: center;
  padding: 1%;
  color: white;
  text-decoration: none;
  transition: 0.5s;
}

.li a:hover:not(.active) {
  background-color: #e6e6e6;
}

.active {
  background-color: #3399ff;
}

.active:hover {
  background-color: #80bfff;
  transition: 0.5s;
}

br.clearLeft {
  clear: left;
}

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<div class="header" ;>Hello</div>

<div class="navwrap">
  <div class="navigation" ;>
    <div class="li a" ;>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
      <br class="clearLeft" />
    </div>
  </div>
</div>

<div class="card" ;>
  <div class="card p" ;>
    <p>
      Example text
    </p>

    <p>
      Example text 2
    </p>

    <p>
      Example text 3
    </p>

    <p>
      Example text 4
    </p>
  </div>
</div>

Answer 1

您的:hover无效，因为您在z-index:-2上应用了.card ...所以最好将其删除......

此外，我已经更改了一些css和html部分来清理代码......

Stack Snippet

＆＃13;

＆＃13;

//<![CDATA[ 
$(function() {
  // Stick the #nav to the top of the window
  var navigation = $('.navigation');
  var navigationHomeY = navigation.offset().top;
  var isFixed = false;
  var $w = $(window);
  $w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navigationHomeY;
    if (shouldBeFixed && !isFixed) {
      navigation.css({
        position: 'fixed',
        top: 0,
        left: 0,
        marginright: 0
      });
      isFixed = true;
    } else if (!shouldBeFixed && isFixed) {
      navigation.css({
        position: 'relative',
        left: 0,
        marginright: 0
      });
      isFixed = false;
    }
  });
});

＆＃13;

{
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0%;
  font-family: Helvetica;
}

.header {
  position: relative;
  left: 0px;
  right: 0px;
  top: 0px;
  font-size: 187%;
  text-align: left;
  padding: 1.5%;
  background-color: #cccccc;
  color: white;
  z-index: 1;
}

.card {
  position: relative;
  margin-right: 2%;
  margin-left: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
}

.card p {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  transition: 0.3s;
}

.card p:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  color: blue;
}

.navigation {
  list-style-type: none;
  position: relative;
  left: 0px;
  margin-right: 0px;
  width: 100%;
  top: 7.2%;
  background-color: #cccccc;
  box-shadow: 0px 3px 25px grey;
  z-index: 0;
}

.wrap {
  margin: 10px auto;
  background: #cccccc;
  padding: 10px;
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
}

.navWrap {
  height: 30px;
  width: 100%;
  z-index: 0;
}

.li a {
  float: left;
  display: block;
  text-align: center;
  padding: 1%;
  color: white;
  text-decoration: none;
  transition: 0.5s;
}

.li a:hover:not(.active) {
  background-color: #e6e6e6;
}

.active {
  background-color: #3399ff;
}

.active:hover {
  background-color: #80bfff;
  transition: 0.5s;
}

br.clearLeft {
  clear: left;
}

＆＃13;

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<div class="header" ;>Hello</div>

<div class="navwrap">
  <div class="navigation">
    <div class="li a">
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
      <br class="clearLeft" />
    </div>
  </div>
</div>

<div class="card">
  <p>
    Example text
  </p>

  <p>
    Example text 2
  </p>

  <p>
    Example text 3
  </p>

  <p>
    Example text 4
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;