Изменить на относительный цвет при наведении в современном CSS - PullRequest
Новая
       66

Изменить на относительный цвет при наведении в современном CSS

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

Я хочу отреагировать на зависание ссылки: 

/* mouse over link */
a:hover {
    text-decoration: none ;
    border-bottom: 1px dotted ;
}

… чтобы немного изменить цвет фона вокруг текста. Вместо того, чтобы указывать определенный цвет, я хочу просто осветлить или затемнить независимо от того, какой унаследованный цвет установлен на данный момент. Для hover и active на ссылке я хочу, чтобы цвет фона изменился, чтобы дать эффект нажатия кнопки.

Я хочу иметь возможность изменять цвет фона текст или страница без необходимости изменения указанного c цвета в правиле a:hover.

Ответы [ 3 ]

0 голосов
/ 06 января 2020

На данный момент это невозможно только с css. Вы можете использовать предварительную обработку, как SASS.

Затем вы можете изменить оттенок, используя filter rule.

Наконец, возможно, то, что вы хотели, есть правило color-mod() в работах, но у меня нет Я не слышал об этом в последнее время.

Ссылка: https://www.w3.org/TR/css-color-4/

PS: я не забывал иногда использовать: 

a {
  background: rgba(255, 0, 0, 1);
}

a:hover {
  background: rgba(255, 0, 0, .8);
}

div {
  display: inline-block;
  background: black;
}

div + div {
  background: white;
}
<div><a>Hover me, darken</a></div>
<div><a>Hover me, lighten</a></div>
0 голосов
/ 06 января 2020

Можно рассмотреть дополнительный слой над фоном, где вы применяете белую или черную окраску, чтобы сделать фон светлее или темнее: 

a {
  display:inline-block;
  padding:10px;
  color:#fff;
  position:relative;
  z-index:0;
}
.red {
  background:red;
}
.blue {
  background:blue;
}
.green {
  background:green;
}
.light:before,
.dark:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(255,255,255,0.3);
  opacity:0;
}
.dark:before {
  background:rgba(0,0,0,0.3);
}

a:hover::before {
  opacity:1;
}
<a class="red light" href="">some text here</a>
<a class="red dark" href="">some text here</a>
<a class="blue light" href="">some text here</a>
<a class="blue dark" href="">some text here</a>
<a class="green light" href="">some text here</a>
<a class="green dark" href="">some text here</a>

Аналогичная идея без псевдоэлемента 

a {
  display:inline-block;
  padding:10px;
  color:#fff;
}
.red {
  background:red;
}
.blue {
  background-color:blue;
}
.green {
  background:green;
}

.light {
  background-image:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3));
}
.dark {
  background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
}

.light,
.dark {
  background-size:0 0;
}

a:hover {
  background-size:100% 100%;
}
<a class="red light" href="">some text here</a>
<a class="red dark" href="">some text here</a>
<a class="blue light" href="">some text here</a>
<a class="blue dark" href="">some text here</a>
<a class="green light" href="">some text here</a>
<a class="green dark" href="">some text here</a>
0 голосов
/ 06 января 2020

Вы можете использовать filter: brightness(), хотя вы также должны указать определенный цвет фона тела и a, чтобы он был inherit. Значение по умолчанию background-color равно transparent и не может быть затемнено. Его нужно изменить на inherit, чтобы получить определенный цвет, чтобы затемнение могло работать. Если он прозрачный, альфа равен 0 и не подлежит затемнению или осветлению.

Однако, если ссылка находится внутри div и div не имеет заданного c фона цвет, тогда он будет прозрачным, и ссылка будет наследовать этот цвет фона. Таким образом, ссылка должна иметь определенный цвет фона для затемнения.

Я сделал window.getComputedStyle($0)["background-color"], где $0 было выбрано div в консоли разработчика, а результат был "rgba(0, 0, 0, 0)", то есть прозрачный. 

body { background: white }

a { background: inherit; border-radius: 2px }

a:hover {
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    filter: brightness(.8);
}
<a href="http://www.google.com">Google</a>
...