стилизация элемента внутри вложенного: посещенное объявление не применяется (vuejs, sass) - PullRequest
Новая
       23

стилизация элемента внутри вложенного: посещенное объявление не применяется (vuejs, sass)

0 голосов
/ 01 октября 2019

Действительно смущен этим. У меня есть сетка элементов со ссылкой, чтобы обернуть изображение, div наложения изображения и заголовок. При посещении ссылки наложение вложенного изображения должно изменить его непрозрачность цвета фона. Но это не применяется. Я могу убедиться, что псевдокласс: visit действует, потому что он применяет изменение цвета к вложенному заголовку. Но непрозрачность не изменится. Я перепробовал множество способов его применения. Вот ручка:

https://codepen.io/heaversm/pen/gOYNJQv

HTML 

<div class="gallery__container">
  <div class="gallery__item">
    <a class="gallery__link" href="http://codepen.io">
      <div class="gallery__image_container">
      <img src="https://i.imgur.com/MQcuk3n.jpg">
      <div class="gallery__overlay"></div>
      </div>
      <p class="gallery__title">Title</p>
    </a>
  </div>
  <div class="gallery__item">
    <a class="gallery__link" href="http://nonsensesite.com">
      <div class="gallery__image_container">
      <img src="https://i.imgur.com/MQcuk3n.jpg">
      <div class="gallery__overlay"></div>
      </div>
      <p class="gallery__title">Title</p>
    </a>
  </div>
</div>

CSS 

.gallery__container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 1.375vw;
  margin: 0 auto;
  padding: 40px 50px;
}

.gallery__image_container {
  position: relative;
}

.gallery__item {
  width: 100%;
  height: auto;
}

.gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  &:visited {
    color: red; //just to verify visited pseudoclass is applied
    .gallery__overlay {
      background-color: rgba(0,0,0,.1) !important; //NOT WORKING
    }
  }
}

.gallery__image {
  //width: 100%;
  //height: auto;
}

.gallery__overlay {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(black, 0.9);
  z-index: 1;
}

1 Ответ

0 голосов
/ 23 октября 2019

С https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

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

Допустимые свойства CSS: 

color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.

Допустимые атрибуты SVG: fill и stroke.

Альфа-компонент разрешенных стилей будет игнорироваться. Вместо этого будет использоваться альфа-компонент состояния non-посещения элемента, за исключением случаев, когда этот компонент равен 0, и в этом случае стиль, установленный в: посещения, будет полностью игнорироваться. Хотя эти стили могут изменить внешний вид цветов для конечного пользователя, метод window.getComputedStyle будет лежать и всегда будет возвращать значение не посещаемого цвета.

И, по моим собственным наблюдениям, дочерние элементыНа ссылку также распространяются те же ограничения стиля.

...