Блог

Главная - Вопросы по программированию - Как отобразить дочерний HTML-элемент поверх области, очищенной родительским элементом clip-path?

Как отобразить дочерний HTML-элемент поверх области, очищенной родительским элементом clip-path?

#html #css #clip-path

#HTML #css #clip-path

Вопрос:

Смотрите https://jsfiddle.net/scott8035/gqn0t9a7/3 /.

В этом примере у меня есть раздел окна содержимого страницы, отображаемый с тенью окна только с левой и правой сторон. Я добиваюсь этого эффекта, добавляя clip-path: inset(0 -10px); CSS в поле содержимого. Пока все хорошо.

Внутри поля содержимого есть элемент. При наведении на него курсора появляется выпадающее меню. Однако меню также обрезается путем клипа из родительского поля содержимого вместо того, чтобы отображаться полностью.

Как я могу отобразить дочерний элемент меню поверх обрезанной области, чтобы вы могли видеть все целиком?

Примечание: я несколько затрудняюсь в том, как я могу структурировать HTML, потому что я использую конструктор страниц, в частности, меню должно быть дочерним элементом поля содержимого.

Вот код на случай, если jsfiddle не работает:

 <body>
    <div id="content-box">
        <div class="hoverable">
            <p>
                Element 1
            </p>        
            <p>
                Element 2
            </p>        
            <p>
                Element 3
            </p>   
            <div class="menu">
                <ul>
                    <li><a href="">Menu item 1</a></li>
                    <li><a href="">Menu item 2</a></li>
                    <li><a href="">Menu item 3</a></li>
                    <li><a href="">Menu item 4</a></li>
                    <li><a href="">Menu item 5</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
 
 body {
    background-color: green;
}

#content-box {
    width: 50%;
    margin: 40px auto;
    padding: 40px;
    background-color: white;
    box-shadow: 0 0 10px #000000;
    clip-path: inset(0 -10px);
}

.hoverable {
    border: 1px solid #bbb;
    padding: 10px;
    position: relative;
}

p {
    background-color: #eee;
    padding: 5px;
}

.hoverable:hover .menu {
    display: block;
}

.menu {
    display: none;
    width: 35%;
    background-color: black;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 172px;
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    border-bottom: 1px solid #555;
}

.menu ul li a {
    display: block;
    padding: 5px 10px;
    color: white;
    text-decoration: none;
}

.menu ul li:hover a {
    background-color: #333;
    color: red;
}

Ответ №1:

Вместо этого примените трюк к псевдоэлементу:

 body {
  background-color: green;
}

#content-box {
  width: 50%;
  margin: 40px auto;
  padding: 40px;
  background-color: white;
  position:relative;
}
#content-box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  box-shadow: 0 0 10px #000000;
  clip-path: inset(0 -10px);
  pointer-events:none;
}
.hoverable {
  border: 1px solid #bbb;
  padding: 10px;
  position: relative;
}

p {
  background-color: #eee;
  padding: 5px;
}

.hoverable:hover .menu {
  display: block;
}

.menu {
  display: none;
  width: 35%;
  background-color: black;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 172px;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu ul li {
  border-bottom: 1px solid #555;
}

.menu ul li a {
  display: block;
  padding: 5px 10px;
  color: white;
  text-decoration: none;
}

.menu ul li:hover a {
  background-color: #333;
  color: red;
} 
 <body>
  <div id="content-box">
    <div class="hoverable">
      <p>
        Element 1
      </p>
      <p>
        Element 2
      </p>
      <p>
        Element 3
      </p>
      <div class="menu">
        <ul>
          <li><a href="">Menu item 1</a></li>
          <li><a href="">Menu item 2</a></li>
          <li><a href="">Menu item 3</a></li>
          <li><a href="">Menu item 4</a></li>
          <li><a href="">Menu item 5</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

Комментарии:

1. Большое спасибо за ответ… но почему это работает?

2. поскольку clip-path больше не применяется к основному элементу, он применяется к псевдоэлементу, который считается дочерним элементом основного элемента, поэтому он больше не является оболочкой для вашего содержимого. Другими словами, я переместил эффект из контейнера в другой элемент, чтобы не влиять на дочерние элементы