Question

我从Codepen抓取的某些代码有问题，试图修改自己的需求。我希望能够在屏幕的左上方看到带有背景的“我们的办公桌”，idk为什么但当背景更改时，跨度就会消失。谢谢！这是小提琴：https://jsfiddle.net/zm8ps24a/1/

HTML

<body> 
    <span class="svc-title"> Our Desks
    </span>
<section id="section-1">
  <div class="hover-link flexboxcenter">   
    <div class="nav-1">
      <a href="#" id="nr-1" class="hvr-underline-from-center">Oldschool Desk</a>
        <div class="bg-1"></div>
      <br>
      <a href="#" id="nr-2" class="hvr-underline-from-center nr-2">Modern Desk</a>
        <div class="bg-2"></div>
      <br>
      <a href="#" id="nr-2" class="hvr-underline-from-center nr-2">Modern Desk Version 2</a>
        <div class="bg-2"></div>
    </div>
  </div>

</section>

</body>

CSS

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);

/* General */



#nr-1:hover + .bg-1,#nr-2:hover + .bg-2{
  opacity:8.0;
}

.flexboxcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1 {

  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
}

.hover-link {
  height: 100px;
  width: 100%;
  z-index: 100000;
}

.hover-link .nav-1 {
  z-index: 10000;
}

.hover-link .nav-1 a {
  top:50px;
  text-align: center;
  display: block;
  font-family: 'Droid Serif', serif;
  text-decoration: none;
  color: black;
  font-size: 50px;
  letter-spacing: 1px;
  padding: 10px;
  transition: all 500ms ease-in-out;
}

/* Background classes */

.bg-1 {
  position: absolute;
  top: 0px;
  left: 0px;
    background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
  background-size: cover;
    height: 200vh;
    width: 100%;
    z-index: -1;
  opacity: 0.0;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;

}

.bg-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
  background-size: cover;
    height: 200vh;
    width: 100%;
    z-index: -1;
    opacity: 0.0;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

/* Hover effect classes */

.new {
  color: white !important;
  opacity: 1 !important;
}

.bla {
  opacity: 0.3;
}

/* Hover Effect Underline From Center by Ian Lunn */

.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 51%;
  right: 51%;
  bottom: 0;
  background: #63A9A9;
  height: 4px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}
.svc-title{
  position:relative;
  font-size:20px;
  font-family:'Heebo';
  float:left;
  left:20px;
  top:10px;
  opacity:1;
  color: #a2a3a7;
}

JS

//Updated

$(function() {
  $('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
    $('.hover-link .nav-1 a').toggleClass('bla');
  });
});

// Second script - Hover effect on active link

$('.hover-link .nav-1 a').hover(function() {
    $(this).addClass("new");
  },
  function() {
    $(this).removeClass('new');
  });

仅是说基本代码是由Håkan-FilipSwahn编写的。

Answer 1

该跨度消失了，因为其z-index CSS属性低于其他元素。将较高的z-index属性值添加到“ .svc-title”，跨度将保持可见：

.svc-title{
  position:relative;
  font-size:20px;
  font-family:'Heebo';
  float:left;
  left:20px;
  top:10px;
  opacity:1;
  color: #a2a3a7;
  z-index:100001;
}

Answer 2

我有点挣扎，我通过添加

来修复它

#section-1 {
  position: relative;
  z-index: 5;
}

.svc-title {
    position: relative;
    font-size: 20px;
    font-family: 'Heebo';
    float: left;
    left: 20px;
    top: 10px;
    opacity: 1;
    color: #a2a3a7;
    z-index: 6;
}

#section-1是导航链接的父级

更改背景后如何防止thext褪色？ CSS \ HTML

2 个答案: