javascript - 卡片阴影效果不起作用(由于悬停不起作用)

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 不起作用，因为你在 .card 上应用了 z-index:-2 ...所以最好删除它...

我还更改了您的一些 css 和 html 部分以清理代码...

堆栈片段

//<![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;
    }
  });
});

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

<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>