Question

我正在设计一个悬停滑块，在悬停时应向下滑动一个下拉菜单，该菜单应在应用display：block;之后显示在样式表的块显示中。它仍然仅以内联方式显示。

在尝试使其在块中时，我直接将显示块应用于元素，然后按预期将所有内容打印在块中，但是当尝试使用类 .slidercontent 时，它不起作用，这是不可行的以块显示。

> const data = {
...       "1.157685561": {
.....         "1222344": {
.......           "batb": [
.......             [0, 0],
.......             [0, 0],
.......             [0, 0]
.......           ],
.......           "batl": [
.......             [0, 0],
.......             [0, 0],
.......             [0, 0]
.......           ]
.......         },
.....         "1222345": {
.......           "batb": [
.......             [0, 0],
.......             [0, 0],
.......             [0, 0]
.......           ],
.......           "batl": [
.......             [0, 0],
.......             [0, 0],
.......             [0, 0]
.......           ]
.......         }
.....       }
...     }
undefined
> 
> data['1.157685561']['1222344']['batl'][0] = [1,2]
[ 1, 2 ]
> 
> data
{ '1.157685561':
   { '1222344': { batb: [Array], batl: [Array] },
     '1222345': { batb: [Array], batl: [Array] } } }
> 
> data['1.157685561']['1222344']['batl'][0]
[ 1, 2 ]
> 
> data['1.157685561']['1222345']['batl'][0]
[ 0, 0 ]
>

.media {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .background {
      pointer-events:none;
      z-index: 1;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(43, 74, 111, 0.2);
    }

    .contents {
      display: flex;
      justify-content: center;
      z-index: 2;
      font-style: italic;
      font-weight: bold;
      color: rgb(27, 5, 58);
      border: solid 10px rgba(3, 35, 54, 0.6);
      padding: -3%;
    }

    .slidercontact {
      width: 80px;
      font-style: italic;
      font-size: 1.1em;
      color: rgb(7, 18, 58);
      background-color: rgba(122, 134, 173, 0.5);
      border: 3px solid rgb(6, 21, 57);
    }

    .slider {
      display: flex;
      margin-right: 1.9%;
      margin-top: -5%;
      margin-bottom: 1%;
      flex-direction: column;
      align-items: flex-end;
    }

   .slidercontent {
     display: none;
     background-color: rgba(196, 231, 154, 0.9);
     width: 187px;
    }
   .slider:hover .slidercontent{
     display: block;
    }

    .slider:hover .slidercontact {
      background-color: rgb(277, 0, 0);
    }

预期在块中的元素，但显示为内联。

Answer 1

问题出在.background上。它是绝对定位的，在其自身的堆栈上下文中位于页面上所有其他内容的顶部。因此，.slider上的悬停没有触发。我删除了该类，并将background-color移至body。

更新

要在文本行1和2上建立链接，必须在block内的a上设置.slidercontent。 / p>

body {
  min-height: 100vh;
  margin: 0;
  background: rgba(43, 74, 111, 0.2);
}

.media {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.contents {
  display: flex;
  justify-content: center;
  z-index: 2;
  font-style: italic;
  font-weight: bold;
  color: rgb(27, 5, 58);
  border: solid 10px rgba(3, 35, 54, 0.6);
  padding: -3%;
}

.slidercontact {
  width: 80px;
  font-style: italic;
  font-size: 1.1em;
  color: rgb(7, 18, 58);
  background-color: rgba(122, 134, 173, 0.5);
  border: 3px solid rgb(6, 21, 57);
}

.slider {
  display: flex;
  margin-right: 1.9%;
  margin-top: -5%;
  margin-bottom: 1%;
  flex-direction: column;
  align-items: flex-end;
}

.slidercontent {
  display: none;
  background-color: rgba(196, 231, 154, 0.9);
  width: 187px;
}

.slidercontent a {
  display: block;
}

.slider:hover .slidercontent {
  display: block;
}

.slider:hover .slidercontact {
  background-color: rgb(277, 0, 0);
}

<div class="media">
  <video src="video.mov" autoplay loop muted></video>`
</div>
<div class="contents">
  <h1>Registration Page</h1>
</div>
<div class="slider">
  <button class="slidercontact">EmailID</button>
  <div class="slidercontent">
    <a href="#">1</a>
    <a href="#">2</a>
  </div>
</div>
</div>

Answer 2

您希望将.slidercontent内的内容显示为块。

首先.background的位置绝对正确，位于UI顶部，可防止代码触发.slider:hover

.slidercontent内的第二个内容是<a>标签，它是嵌入式元素。

因此需要将您的代码更改为：

.background {
 /* add a line in the background class*/
    z-index: -1;
}

/* to make the <a> tag block */
    .slidercontent a {
      display: block;
    }

设计悬停滑块时显示块在CSS中不起作用

2 个答案:

更新