javascript - 按钮悬停将更改 div 的背景和两个 block 之间的图片

Question

我正在尝试为背景和图片做基于 css 的悬停，以便仅在悬停在主 div 内的按钮/链接上时显示。

问题是背景颜色出现在整个页面上，而不仅限于我正在尝试所有这些事情的那个 div block 。

代码如下:

<div class="suction">
<ul class="menu">
  <div class="block">
    <li><a href="#">h</a></li>
    <li><a href="#">g</a></li>
    <li><a href="#">i</a></li>
    <li class="bg"></li>
  </div>
  <div class="block">
    <li><a href="#">p</a></li>
    <li><a href="#">l</a></li>
    <li><a href="#">m</a></li>
    <li class="bg"></li>
  </div>
</ul>

这是CSS:

 * {
  margin: 0;
  padding: 0;
}
body {
      background: #e5e5e5;
    }

suction {
        margin:0 auto;
  max-width:100%;
  height: 400px;
}

.block {
  width: 20%;
  padding: 25px 0;
  display: inline-block;
  margin: 10px;
}

.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}

li {
  list-style: none;
}

li a {
  display: block;
  float: ;
  width: 20%;
  padding: 25px 0;
  text-align: center;
  font-family: 'HeydingsCommonIconsRegular', Helvetida Neue, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 40px;
  color: #fff;
  background: #ccc;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .25);
  transition: .25s;
}

li a:hover {
  margin: -10px 0 0 0;
}

.ajabmenu {
  margin: 60px auto 0 auto;
  border-radius: 10px;
  overflow: hidden;
  display: block
}

.ajabmenuu li:first-child a {
  background: #ffca6d !important;
}

.ajabmenu li:nth-child(2) a {
  background: #ff6d6d !important;
}

.ajabmenu li:nth-child(3) a {
  background: #6dffb9 !important;
}

.ajabmenu li:nth-child(4) a {
  background: #6dcaff !important;
}

.ajabmenu li:nth-child(5) a {
  background: #ec6dff !important;
}

.ajabmenu li:first-child:hover ~ .bg {
  background: #ffca6d url("https://www.drupal.org/files/images/druplicon-polska-small.png") no-repeat center top fixed;
}

.ajabmenu li:nth-child(2):hover ~ .bg {
  background: #ff6d6d;
}

.ajabmenu li:nth-child(3):hover ~ .bg {
  background: #6dffb9;
}

.ajabmenu li:nth-child(4):hover ~ .bg {
  background: #6dcaff;
}

.ajabmenu li:nth-child(5):hover ~ .bg {
  background: #ec6dff;
}

Codepen link

一切都应该在“吸力” block 下，永不熄灭。我尝试从 .bg 中删除 Fixed 但它不起作用。

如果有什么好的方法或者简单的方法，请告诉我。

Answer 1

好的，第一个解决方案无效。试试这个:

您绝对需要在“吸力”类中去掉背景颜色，但是这个代码笔可以工作。

Codepen

我所做的基本上是将点 (.) 放在你的 'suction' 类之前，因为它没有做任何事情，将背景更改为透明，并将你的 .bg 类上的固定位置更改为绝对位置，然后宽度/高度为 100%。

以下是重要的类:

.suction {
  width: 50%;
  background: transparent;
  margin: 10px auto;
  position: relative;
  text-align:center;
}


.bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
  width: 100%;
  height: 100%;
}