Как настроить таргетинг на CSS: после элемента с помощью селектора тильды? - PullRequest
Новая
       4

Как настроить таргетинг на CSS: после элемента с помощью селектора тильды?

1 голос
/ 19 января 2020

Селектор ::after будет вставлять что-то после содержимого, является ли этот таргетинг с предыдущим селектором ~?

Например, HTML: 

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    ::after       
</ul>

CSS: 

ul::after { 
    content: ''; 
    display: block; 
    height: 50px;
    width: 100%;
    background: red;
}

ul li:hover ~ ::after {
    background: blue;
}

ПРИМЕР КОДА

Ниже вы можете найти рабочую версию того, что я ищу. Однако я сделал это с включенным div «sub-menu-bar». Теперь кажется, что псевдоэлемент ::after расположен в точном месте инспектора DOM. Было бы хорошо, если бы это можно было сделать без div.

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

ul, li
{
list-style: none;
padding: 0;
margin: 0;
}

a 
{
cursor: pointer;
display: block;
color: inherit;
text-decoration: none;
text-transform: uppercase;
}

a > * 
{
user-select: none;
}

ul.menu
{
position: relative;

display: flex;
width: 100%;

flex-wrap: wrap;
justify-content: center;

background: #FFF;
}

ul.menu > li.menu-item > a
{
padding: 0px 10px;
height: 50px;
overflow: hidden;
transition: height 0.3s;
}

ul.menu > li.menu-item > ul.sub-menu
{
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;

display: flex;
width: 100%;
height: 0px;

align-items: center;
justify-content: center;
transition: height 0.4s;

color: #FFF;
}

ul.menu > li.menu-item > ul.sub-menu > li.menu-item
{
overflow: hidden;
}

ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a 
{
padding: 0px 10px;	

transform: translateY(100%);
opacity: 1;

transition-property: transform, opacity;
transition-timing-function: cubic-bezier(0.52, 0.16, 0.24, 1);
transition-delay: 0s;
transition-duration: 0.2s;
}

ul.menu > div.sub-menu-bar
{
content: '';

display: block;
width: 100%;
height: 2px;

flex-basis: 100%;
transition: height 0.4s;

background: #000;
}

ul.menu > li.menu-item-has-children:hover > ul.sub-menu
{
height: 50px;
}

ul.menu > li.menu-item-has-children:hover > ul.sub-menu > li.menu-item > a 
{
transform: translateY(0%);
opacity: 1;
transition-delay: 0.2s;
}

ul.menu > li.menu-item-has-children:hover ~ div.sub-menu-bar 
{
height: 50px;
}
<ul class="menu">
<li class="menu-item"><a>Item #1</a></li>
<li class="menu-item menu-item-has-children">
    <a>Item #2</a>
    <ul class="sub-menu">
        <li class="menu-item"><a>Subitem #2.1</a></li>
        <li class="menu-item"><a>Subitem #2.2</a></li>
    </ul>
</li>
<li class="menu-item menu-item-has-children">
    <a>Item #3</a>
    <ul class="sub-menu">
        <li class="menu-item"><a>Subitem #3.1</a></li>
        <li class="menu-item"><a>Subitem #3.2</a></li>
    </ul>
</li>
<li class="menu-item"><a>Item #4</a></li>
<li class="menu-item"><a>Item #5</a></li>
<div class="sub-menu-bar"></div> <!-- Can we avoid this with ::after pseudo element? -->
</ul>

<p>Content below the navigation.</p>

Ответы [ 2 ]

1 голос
/ 20 января 2020

При наведении указателя мыши на определенный элемент списка c (li) с именем класса. Мне нравится менять цвет фона элемента ::after, который расположен на ul::after.

Да, вы можете добиться этого эффекта, используя pointer-events.

. способ сделать это - применить к <ul> и <li> стиль: 

ul, li {
  pointer-events: none;
}

и применить к элементу <li> стиль: 

li.hover-over-this {
  pointer-events: auto;
}

Рабочий пример: 

ul {
position: relative;
margin-left: 0;
padding-left: 0;
font-weight: bold;
background-color: white;
cursor: pointer;
}

li {
width: 50%;
padding: 6px;
color: rgb(255, 255, 255);
line-height: 24px;
background-color: red;
list-style: none;
}

ul:hover::after {
content: 'Hovering!';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
line-height: 100px;
color: rgb(255, 0, 0);
text-align: center;
background-color: rgb(255, 255, 0);
}

ul, li {
pointer-events: none;
}

li.hover-over-this {
pointer-events: auto;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hover-over-this">Hover Over This</li>
<li>5</li>
</ul>

Дополнительная литература:

1 голос
/ 19 января 2020

Для этого не требуется ~. селектор ~ выбирает всех братьев и сестер после элемента. Псевдоэлемент ::after находится внутри li.

li:hover ~ li, например, будет нацелен на все li элементы после li, который наведен.

Для того, что вы хотите чтобы сделать, используйте: 

ul li:hover:after {
    background: blue;
}

Редактировать :

Извините, я не видел после того, как применяется к ул. Это невозможно с чистым CSS, так как нет «родительского» селектора. Вы можете использовать только ul:hover:after (или что-либо более высокое в иерархии, чем ul), чтобы нацелиться на элемент after. Что вы могли бы сделать: 

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li></li>
</ul>

li:hover ~ li:last-of-type {
 //something
}

Ура!

...