html - 在 div 之外的跨度上悬停图像选项

Question

我正在创建一个查询列表，悬停时会显示一张图片。

我尝试过更改多个 div 上的 z-index，将位置从相对位置更改为绝对位置，或者相反。

.naglowek2 {
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

.naglowekbox2 {
  background-color: #c34f3f;
  padding: 10px;
  margin: 0px;
  left: 0px;
  top: 0px;
  max-width: 1000px;
  border-top: 2px dashed #751b1b;
  border-left: 2px dashed #751b1b;
  border-right: 2px dashed #751b1b;
  -webkit-box-shadow: 0px 0px 14px 3px #000000;
  -moz-box-shadow: 0px 0px 14px 3px #000000;
  box-shadow: 0px 0px 14px 3px #000000;
  text-shadow: 1px 0 0 #000000, -1px 0 0 #000000, 0 1px 0 #000000, 0 -1px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
}

.naglowekboxinner2 {
  background-color: #303030;
  padding-left: 5px;
  padding-top: 4px;
  padding-right: 5px;
  padding-bottom: 0px;
  margin: auto;
  max-width: 450px;
  text-align: left;
  color: #ffffff;
}


/* 08  */

.category-textzd1 {
  font-size: 16px;
  color: #ffffff;
}

.desc-togglezd1 {
  font-size: 20px;
  cursor: pointer;
}

#togglezd1-1 {
  display: none;
}

.category-descriptionzd1 {
  height: 0px;
  /* we start animation from 0px */
  overflow: hidden;
  /* without this the contents will be 
                                            * visible regardless of height */
  transition: height 0.5s ease-in;
  /* transition has to be defined on base state of element */
  background-color: #303030;
  /* make transition easier to observe */
}

input[type=checkbox]:checked~.category-descriptionzd1 {
  height: 150px;
  /* change height when input is checked */
}


/* 08 Koniec */

.hover_imgzdself {
  display: inline-block;
}

.hover_imgzdself a {
  position: relative;
  cursor: help;
  padding: 0;
  margin: 0;
}

.hover_imgzdself a span {
  position: absolute;
  display: none;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100px;
  border: 1px solid #000000;
  background-color: #c1c1c1;
}

.hover_imgzdself a:hover span {
  display: block;
  z-index: 100;
}

<center>
  <div class='naglowekbox2'>
    <div class='row'>
      <div class='col-lg-12'>
        <p class='naglowek2'>H1/H2:</p>
      </div>
    </div>
    <div class='row'>
      <div class='col-lg-6 naglowekboxinner2'>
        <center>
          <label class="desc-togglezd1" for="togglezd1-1">List</label>
        </center>
        <input type="checkbox" id="togglezd1-1">
        <div class="category-descriptionzd1">
          <p class="category-textzd1">
            <div class='hover_imgzdself'>
              <a>Picture One
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture Two
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture One
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture Two
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture One
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture Two
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture One
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture Two
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture One
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
            <div class='hover_imgzdself'>
              <a>Picture Two
                          <span>
                            <img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
                          </span>
                        </a>
            </div>
            &nbsp;&semi;
          </p>
          <center>
            <label class="desc-togglepo1" style='font-size: 14px;' for="togglezd1-1">Zwiń</label>
          </center>
          <input type="checkbox" id="togglezd1-1">
        </div>
      </div>
    </div>
    <div style='height: 10px;'></div>
  </div>
</center>

当您单击“列表”时，它会打开一个选项列表。这个想法是，当您悬停这些选项之一时，它应该显示一张 200x100 像素的图片。 但是，如果您转到最右侧的选项，这些图片不会完全显示，而是被剪切成列表框的大小。

Answer 1

发生这种情况是因为 .category-descriptionzd1 中的 overflow: hidden。如果我删除它，它对我有用。