User Interaction with the Hover Selector
One thing I love about front end web design is user interaction. When building out web applications, user interaction is very important. I will demo a cool tool that manipulates an element in real time and is user interactive. This is very simple and only uses HTML and CSS.
The hover tool in CSS is very helpful. You can use it to alter the element the user is hovering their mouse over. It can be paired with different elements like a button,link,or list. To give a basic example I will start with a list item.
I have a list item here that I also gave classes with the names of “flatiron school”. I will use the class to manipulate the CSS of the specific <li> element.
Here I set some properties to the <li> using the class attribute. The padding and border gives it a box look which, I think is very nice.The transition property in the original element’s CSS gives the element a smooth transition that is appealing to the eye. All, makes sure all aspects of the element change, the 200ms tell how long the element will take to transition and ease-in is a type of deliver for the transition.Combining the HTML and CSS we end up with something like the following:
In the CSS we can make changes to the element using the hover command. I can give a few different elements the same properties so my code is cleaner. I can do this by giving multiple elements the same class or giving multiple classes the same properties.
I want the element I gave the class of .flatiron to have specific properties so when it is being hovered over it can display unique properties. I make the cursor turn into a pointer and I want to change the background into an image which contains the Flatiron School logo . It will look nicer if the image has a display as large as possible within the limits of the element so I set the background size to contain.
Hover is a very fun tool to play around with. It makes implementing user interaction easy. Hover can be used in simple or complex ways and it is a nice touch to any web page.
