Как показать раскрывающуюся ширину в скрытом переполнении?

0

Есть ли какое-либо решение для выпадающего списка при использовании переполнения в bxslider?

на самом деле у div есть overflow:hidden чтобы правильно показать карусель. У кого-нибудь есть идея исправить эту проблему с помощью z

Изображение 174551

.member{
    position: absolute;
    top: 50px;
    left: 50%;

    width: 150px;
    height: 250px;
    margin-left: -75px;
    background: red;
    z-index: 9999;
}

http://jsfiddle.net/ZpzPG/

  • 1
    Вы имеете в виду переполнение: скрыто?
  • 0
    @bboymaanu Не совсем понятно, что вы пытаетесь сделать. Не могли бы вы отредактировать свой вопрос, чтобы объяснить?
Показать ещё 16 комментариев
Теги:
overflow
z-index
bxslider

2 ответа

1
Лучший ответ

Нет никакой возможности показать дочерние элементы для отображения вне родительского overflow:hidden

$('#members-bio').bxSlider({
  slideWidth: 300,
  minSlides: 2,
  maxSlides: 2,
  slideMargin: 10
});
$(document).ready(function() {
  $('figure').click(function() {
    var memberDetails = $(".member-details"),
      item = $(this),
      listLeft = (item.offset().left) + 60;
    memberDetails.offset({
      left: listLeft
    }).addClass('active-member');
  });
});
figure {
  margin: 0;
}
.member {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 150px;
  height: 250px;
  margin-left: -75px;
  background: red;
  z-index: 9999;
}
.member-details {
  background-color: #fff;
  border: 1px solid #333;
  width: 140px;
  position: absolute;
  top: 150px;
  opacity: 0;
  display: none;
}
.active-member {
  display: block;
  opacity: 1;
}
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div id="members-div">
  <ul id="members-bio">
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb1">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb2">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb3">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb4">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb5">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb6">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb7">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb8">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb9">
      </figure>
    </li>
    <li class="slide">
      <figure>
        <img src="http://placehold.it/350x150&text=memerb10">
      </figure>
    </li>
  </ul>
  <div class="member-details">
    <p>Yes here</p>
    <p>is the</p>
    <p>member details</p>
  </div>
</div>
Поделиться
0

Я не совсем уверен, что вы здесь имеете в виду? никогда не слышал о перекрытии: скрытый, я слышал о переполнении, но проблема в том, что вы хотите показать весь класс.member, не отключив его от ползунка?

В этом случае выньте "верхний" Атрибут, а затем в свой html поместите вас на изображение, и оно поместит его, чтобы вы могли видеть все данные?

Поделиться
  • 0
    Пожалуйста, проверьте обновленный вопрос

Ещё вопросы

Сообщество Overcoder
Наверх
Меню