Хм... div:after:hover не работает. Как выкрутиться?

Question

[Илья]

div:after:hover не работает.

Моя цель: при наведении на иконку printerest, менять с opacity: .5 на opacity: 1. Иконка висит на after.

.artical {
			position: relative;
			.artical-pic:after {
				position: absolute;
				content: '';
				top: 0;
				right: 0;
				width: 52px;
				height: 44px;
				background-image: url(../img/printerest-icon.png);
				cursor: pointer;
				opacity: .5;
			}
			.artical-pic:after::hover {
				opacity: 1;
			}
		}
	}

Comments

[Андрей Саныч]

а если после after поставить одно двоеточие?

[Илья]

Андрей Саныч, то ничего не меняется.
это я уже экспериментирую как могу)

[Андрей Саныч]

Илья, ну тогда полный код в студию. мы ж не телепаты))

[Илья]

HTML

<div class="content">
				<div class="main-part">
					<div class="artical">
						<div class="artical-pic">
							<img src="../decoblog/img/content-pic.jpg" alt="picture">
						</div>
					</div>
				</div>
				<div class="side-part">
					
				</div>
			</div>

CSS

.content {
	display: flex;
	margin: 60px 0;
	.main-part {
		width: 75%;
		margin-right: 20px;
		.artical {
			position: relative;
			.artical-pic:after {
				position: absolute;
				content: '';
				top: 0;
				right: 0;
				width: 52px;
				height: 44px;
				background-image: url(../img/printerest-icon.png);
				cursor: pointer;
				opacity: .5;
			}
			.artical-pic:after:hover {
				opacity: 1;
			}
		}
	}
	.side-part {
		width: 25%;
		height: 100px;
		background-color: $white;
	}
}

Answer 1

[Александр Филиппенко]

У псевдоэлементов нет псевдоклассов. То есть hover на after работать и не должен. Можно поменять местами hover и after, но тогда иконка будет темнеть при наведении на весь блок. А в вашем случае придётся для иконки отдельный блок создать.

Comments

[Илья]

я подозревал, что это и не должно сработать, но надеялся)
то есть выйти из ситуации можно обернув иконку в див и выровнять абсолютом?

[Александр Филиппенко]

Илья, именно. Собственно у вас на .artical-pic:after все необходимые стили есть, перенесите их на новый блок вложенный в .artical-pic и уберите content

[Илья]

Александр Филиппенко, спасибо! Сработало)