Форум

Siend · #1 (**permalink**) 12.09.2015, 18:16

Ребят, подскажите плиз:

"Кнопки при наведении подсвечиваются фильтром rgba 255 255 255 0.2, в момент нажатия затемняться 0 0 0 0.2."

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

Decode · #2 (**permalink**) 12.09.2015, 18:47

Сообщение от Siend

"Кнопки при наведении подсвечиваются фильтром rgba 255 255 255 0.2, в момент нажатия затемняться 0 0 0 0.2."

:hover - наведение
:active - нажатие

Lemme · #3 (**permalink**) 12.09.2015, 19:29

Decode, не сможет он этого без "препроцессора". Ибо в данном случае :hover, :active будут заменять цвет, а не накладывать.

Lemme · #4 (**permalink**) 12.09.2015, 19:31

Но, как вариант - можно извратиться с псевдоэлементами

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 50px;
			background-color: #321;
		}
		div:after{
			display: block;
			width: 100%;
			height: 100%;
			content: ' ';
		}
		div:hover::after{
			background-color: rgba(255,255,255,0.5);
		}
		div:active::after{
			background-color: rgba(000,000,000,0.5);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

Siend · #5 (**permalink**) 13.09.2015, 11:43

Ааа, клаааас! спасибо) я столько раз уже встречал эти псевдоклассы before и after, но никак не могу в них до конца разобраться) Ваш вариант я тоже пробовал, только он у меня выглядел так:

div{
            width: 100px;
            height: 50px;
            background-color: #321;
        }
        div:hover::after{
            background-color: rgba(255,255,255,0.5);
        }
        div:active::after{
            background-color: rgba(000,000,000,0.5);
        }

Само собой ничего не сработало, а я и не понял что after нужно было перед этим тоже определить) спасибо огромное)

Lemme · #6 (**permalink**) 13.09.2015, 11:58

Siend, ничего не нужно определять, почитайте документацию по "псевдоэлементам".

Siend · #7 (**permalink**) 13.09.2015, 12:07

ну эт я не правильно выразился. Ваш код отличается от моего тем что прежде чем писать ховер:афтер, вы и для самого дива сделали афтер с указанием размером и типа display:block, под эти я и подразумевал "определять"

Lemme · #8 (**permalink**) 13.09.2015, 12:14

Siend, я вынес это отдельно, чтоб не дублировать, т.е так тоже будет работать:

div:hover::after{
	display: block;
	width: 100%;
	height: 100%;
	content: ' ';
	background-color: rgba(255,255,255,0.5);
}
div:active::after{
	display: block;
	width: 100%;
	height: 100%;
	content: ' ';
	background-color: rgba(000,000,000,0.5);
}

Siend · #9 (**permalink**) 13.09.2015, 12:59

А, теперь понял что вы имели ввиду) Большое спасибо)

Форум

Справочник

Discord чат

Курсы javascript