Прожекторный блок inline с блоком css - PullRequest
Новая
       4

Прожекторный блок inline с блоком css

2 голосов
/ 23 февраля 2020

Я хочу выделить элемент списка при наведении, уменьшив непрозрачность других элементов, и мы все знаем этот трюк: 

ul:hover li a:not(:hover){ 
        opacity: 0.3;
}

Дело в том, что как только Я нахожу на ul, даже в пустых областях, все элементы списка получают opacity: 0.3. Вот фрагмент: 

a {  
  display: inline-block;
  text-decoration: none;
  font-size: 3rem;
  color: black;
}

ul{
  list-style: none;
}

ul:hover li a:not(:hover) { 
  opacity: 0.3;
}
<ul >
  <li>
    <a href="#">FIRST</a>
  </li>
  <li>
    <a href="#">SECOND</a>
  </li>
  <li>
    <a href="#">THIRD</a>
  </li>
  <li>
    <a href="#">FOURTH</a>
  </li>
  <li>
    <a href="#">FIFTH</a>
  </li>
</ul>

Есть ли способ заставить его работать, только когда я наведите курсор на элементы ссылки (то есть тег a с display: inline-block).

Ответы [ 2 ]

1 голос
/ 23 февраля 2020

Вы можете рассмотреть pointer-events трюк, как показано ниже, и при наведении курсора только a вызовет изменение непрозрачности: 

a {  
  display: inline-block;
  text-decoration: none;
  font-size: 3rem;
  color: black;
  pointer-events:initial; /* Keep the hover only on a and it will also trigger the ul */
}

ul{
  list-style: none;
  pointer-events:none; /* Disable the hover on ul */
}

ul:hover li a:not(:hover) { 
  opacity: 0.3;
}
<ul >
  <li>
    <a href="#">FIRST</a>
  </li>
  <li>
    <a href="#">SECOND</a>
  </li>
  <li>
    <a href="#">THIRD</a>
  </li>
  <li>
    <a href="#">FOURTH</a>
  </li>
  <li>
    <a href="#">FIFTH</a>
  </li>
</ul>
0 голосов
/ 23 февраля 2020

В CSS нет возможности выбрать все недочерние элементы, поэтому необходимо использовать ul:hover.

. Вы можете попробовать работать только с li:hover, удалить * 1005. * заполнение и изменение a отображение в блоке (так что он принимает те же размеры, что и li).

Попробуйте: 

a {
  display: block;
}

ul {
  padding: 0;
}

ul:hover li:not(:hover) {
  opacity: 0.3;
}

Если вы действительно хотите избежать hover в пустое пространство, добавьте это: 

ul {
  display: inline-flex;
  flex-direction: column;
}
...