Changing the color of the input ( button ) in the hover state

HTML-CSS
1

I tried to use the same idea as given in the example

input[type=“submit”] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #b9fffc;

&:hover {
  background-color: blue;
  transition: background-color 1s;
}

}

but it did not change the background color of the button.

I then tried the following and it did not change the background color either. Can someone please help me to change the backgrouynd color of my button.

input [ type=“submit” ]:hover {
background-color: blue;
}

2

Hello,
I created this file for test and it’s working for me

<style>
	p{background-color:blue;}
	input[type="text"]:hover{
		border:1px solid red;
		background-color:green;
	}
</style>
<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<p>Blablabla</p>
		<input type="text" />
	</body>
</html>

On the other hand the LESS syntax doesn’t work for me too.
Check your import and the file name and path. Sometimes we don’t pay attention and the problem could probably come from.
And last thing, why not use simple CSS

1 Like
3

Strict CSS is required in the coding challenges.

1 Like
4

If you want to use SCSS for the challenges, you can try this tool for a quick SCSS => plain CSS conversion:

The important thing to remember is that, without precompilation, SCSS will not run correctly in the browser. You always need to use some tool (within a build script or manually) to covert it to plain CSS.

1 Like
5

Thank you, I don’t know why I went with the difficult way but now I learnt from my mistake.

6

Thank you very much.

7

The problem was the white space between input and the square bracket in this code ( input [ type=“submit” ]:hover ) what a mistake!

8

Yeah, you gotta watch out for that. In CSS selectors, whitespace is significant:

.c1 .c2 {
  /* any .c2 element that is a descendant of a .c1 element */
}

.c1.c2 {
  /* any element that has both .c1 and .c2 classes */
}
9

Oh yeah as @lionel-rowe said space mean in CSS and for next if you want space for more readability you can write

input[ type="text" ] {
  /* your code here */
}