OneCompiler

How to add a different color when hover the element in SCSS

255

I have a list of links and I want to show them in a different color when user hover it. Following is my scss code for the element

.recent-work-element {
	font-family: 'Lato-Regular';
	display: inline-block;
	font-size: 1.0em;
	color: #62636c;	
}

How can I add hover color to it? I have tried the following but not working

.recent-work-element {
	font-family: 'Lato-Regular';
	display: inline-block;
	font-size: 1.0em;
	color: #62636c;

	:hover {
		color: red;
	}
	
}

1 Answer

6 years ago by

& is used as parent selector in Sass. This is used in nested selectors to refer to the outer selector.
So you need the following code

.recent-work-element {
	font-family: 'Lato-Regular';
	display: inline-block;
	font-size: 1.0em;
	color: #62636c;

	&:hover {
		color: red;
	}
	
}
6 years ago by Karthik Divi