Question

代码用于在悬停期间显示图像。

除了在悬停时不显示图像外，我还在图像的顶部（约17像素）和右侧获得白色边框。

有关为何发生这种情况的任何建议？

  .nav-wrap {
    width: 100%;
    height: 770px;
    background: #111;
    position: relative;
  }

  .nav-wrap .img-place {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 5;
  }

  .nav-wrap .nav li {
    font-family: 'HelveticaNeue';
    position: relative;
    z-index: 6;
    list-style: none;
  }

  .nav-wrap .nav li a {
    display: block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 48px;
    text-transform: uppercase;
    font-weight: "Thin";
    letter-spacing: 0px;
    margin: -12px;
    padding: 0px 0px 0px 70px;
    transition: all 0.5s ease-in-out;
  }

  .nav-wrap .nav:hover li a {
    opacity: 0.3;
  }

  .nav-wrap .nav li a:hover {
    opacity: 1;
    padding-left: 95px;
    font-weight: 600;
  }

  .nav-wrap .bg1 {
    background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
    background-size: 120%;
    opacity: 0.3;
    -webkit-animation: fadein 2s forwards;
    -moz-animation: fadein 2s forwards;
    -ms-animation: fadein 2s forwards;
    -o-animation: fadein 2s forwards;
    animation: fadein 2s forwards;
    -webkit-animation: mymove 11s forwards ease-out;
    animation: mymove 11s forwards ease-out;
  }

  ` @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-moz-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-ms-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-o-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes mymove {
    0% {
      top: -12px;
    }
    100% {
      top: -240px;
    }
  }

  @keyframes mymove {
    0% {
      top: -12px;
    }
    100% {
      top: -240px;
    }
  }

  .nav-wrap .bg2 {
    background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
    background-size: 125%;
    opacity: 0.4;
    animation: bgani 7s linear forwards;
  }

  .nav-wrap .bg3 {
    background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
    background-size: 130%;
    -webkit-animation: fadein 3s forwards ease-out;
    -moz-animation: fadein 3s forwards ease-out;
    -ms-animation: fadein 3s forwards ease-out;
    -o-animation: fadein 3s forwards ease-out;
    animation: fadein 3s forwards ease-out;
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-moz-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-webkit-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-ms-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @-o-keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes bgani {
    0% {
      opacity: 0;
      background-size: 100%;
    }
    15% {
      opacity: 0.3;
    }
    100% {
      background-size: 125%;
    }
    </style>

Answer 1

我猜你是jsfiddle的新手吗？我现在正确地格式化了，这有用吗？

$('.nav li a').hover(function() {
  $('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

http://jsfiddle.net/link2twenty/wfpzLv8n/2/

Answer 2

你的jsFiddle搞砸了，就是这样。您不应将<style></style>标记放在CSS区域中，也不应将<script></script>标记放在JavaScript区域中。此外，要包含jQuery，您需要将其包含为外部资源，这是左侧边栏中的一个部分。您将资源URL放在文本框中，然后单击右侧的加号按钮。这是一个固定版本，你的HTML也被清理干净了 http://jsfiddle.net/xchrt5db/

悬停图片显示

2 个答案: