时间戳

首页 > 解决方案 > 设计悬停滑块时显示块在css中不起作用

html - 设计悬停滑块时显示块在css中不起作用

问题描述

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

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

.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);
    }
<div class="media">
<video src="video.mov" autoplay loop
muted></video>`
</div>
<div class="background"></div>
<div class="contents">
	<h1>Registration Page</h1>
</div>
<div class="slider">
<button class="slidercontact">Contact</button>
<div class="slidercontent">
	<a href="#">1</a>
	<a href="#">2</a>
</div>
</div>

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

标签： htmlcss

解决方案

你想将里面的内容显示.slidercontent为一个块。

首先.background是绝对定位，位于 UI 之上并防止代码触发.slider:hover

其次.slidercontent是 is<a>标签内的内容，它是内联元素。

所以需要将您的代码更改为：

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

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

推荐阅读