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

Question

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

```css
.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

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

:hover {
		color: red;
	}
	
}
```

Karthik Divi · Accepted Answer

`&` 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

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

&:hover {
		color: red;
	}
	
}
```

1 Answer