Question

我正在创建一个查询列表，将其悬停时将显示图像。

我尝试过在多个div上更改z索引，将位置从相对位置更改为绝对位置，反之亦然。

.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

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

Answer 2

请在此处找到更新的jsfiddle。

https://jsfiddle.net/thanooshan/x3q1zjsf/5/

为了防止切换效果，我从for="togglezd1-1"中删除了<label class="desc-togglezd1 toggle-label">List</label>。并添加了toggle-label类作为选择器以获得切换效果。

然后删除了不必要的样式并添加了display: none属性。

.category-descriptionzd1 {
   display: none;
   background-color: #303030;
}

现在，它消除了图像裁剪问题。为了再次获得切换效果。我是通过以下代码实现的。

$('.toggle-label').click(function(e) {
    e.preventDefault();

  $('.category-descriptionzd1').slideToggle('fast');
});

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

2 个答案: