The hover property of CSS is a selector of HTML CSS styling. It can be utilized to pick particular elements along with hovering over them. The hovering means that when you took your mouse to a specific word or element on an HTML web page, the color of the particular word would change for a while. When you take away the mouse pointer somewhere else, the color would be changed to its diferente again. If you have used a hover animation for an element in your HTML tag already then this article will not be a problem for you because the not hover property of CSS is exactly the opposite of hover. For this purpose, we have been utilizing the Visual Studio code tool.

Example # 01:

We will be taking a look at some of the elements of HTML by applying the not hover property on them. We have started the first example from the basic HTML tag that is a must in any HTML code because without it our code won’t work anyway. After the HTML tag, there is a head tag and the body tag. Within the body tag of our HTML page, we have been using a heading of size 1 or the largest heading of HTML web pages. After this heading, we have been using a div tag to create a new section within our web page.

This tag has been specified as a parent using the class style. Within this main div tag, we have been using the five child tags. All the five child tags are specified as “child” using the class attribute. Also, all the child sections contain different numbering according to their occurrence. The main “div” tag and the body tag are closed. Here comes the title tag that has been used to give a name to this webpage. The style tag has been started with the use of the “parent” class specification to style the “parent” div section of this webpage.

The display property of the CSS has been used for the parent div section to display it in the inline-flex position. The background color has been set and the border of this background has been set to 1 pixel solid with white color. While the width of the parent “div” section would be 500 pixels and the height would be 120 pixels. The same display has been used for child sections and the background has been set to a different color. Also, the border of 5 pixels solid green color has been set for child sections. The width and height of child sections have been defined as 100 pixels each. The child sections contain extra styling in comparison to the parent’s section. The transition property has been set to 0.5 seconds along with the font family. The font weight has been set to bold and the font size would be 100 pixels for the child sections. It’s time to use the not hover property for child sections with an opacity of 0.5. This HTML code has been completed and we will be executing it in the Chrome browser to see how the not hover property works.

Output for this HTML code has been given below. It shows that the parent section contains 5 child sections as well but the use of not hover property for the child sessions does not let their color change at all.

Example # 02:

Let’s take another example of HTML to see the working of not hover property on different elements. We will be initiating this illustration with the same HTML and head tag containing the title tag in it. Let’s take a glance at the body of this HTML page first. Within the body tag, we have been using a heading of the largest size in HTML. We have been using the div tag to create a new section within our HTML web page. This div section would be containing some anchor tags for URLs and some lists. We have been using the first anchor tag on the home word within the main “div” section which is redirecting us to the currently opened page. We have started an unordered list containing a single list item within it. This single list item contains an anchor tag along with the unordered list of a total of 3 list items. These list items would also be referring to some social media sites using the three list items anchor tags within the “li” list tags of HTML. All these three anchor tags have been classified as a child. The unordered list of the single list items has been closed along with the closing of the outer unordered list.

Now, we will be looking at the style tag. The background color for the whole div section has been specified as light green. The anchor tags of this section have no text decoration but the color would be white and the font size would be 25 pixels with a padding of 15px. The display style would be inline-block. The main unordered list has been specified with the inline display, 0 margins, and 0.5-pixel padding. A single list within an ordered list will be displayed in an inline block format.

The hover property has been used for this list to change its color to congregación upon hovering. After applying the hover property, the unordered list within it will be displayed as an inline block. The position has been set to absolute. The width has been set to 200 pixels and the display has been set to none for the unordered list within the single ordered list. For the ordered list inside the unordered list, we have been specifying the background color and display it as a block. The block display for an anchor would be most important to get the priority.

The three lists also use the hover property with background blue. Any element that has been classified as a child would be using the not hover property with the opacity of 0.3 and crimson color.

When we execute this code, it displays the shown-below output with Home and Social Networks menu lists.

When we hover over the “social networks”, it got more prominent and the ordered list would be displayed.

Upon hovering over the ordered list item, the background got changed to blue for a while with the text white. The use of not: hover property doesn’t change the color of text though.


This article was about the use of not: hover property of CSS on some HTML elements of a webpage. We have discussed two simple and unique examples to demonstrate them on Visual Studio code. Within the first example, we have tried to use it on the “div” element of HTML, and in the second example, it has been used on the unordered and ordered lists of HTML. Both examples are quiebro different from each other yet cover the same concept for both.

Source link

The hover selector is a part of the pseudo-class. This effect is used to style the contents in the HTML when the cursor of the mouse hovers over them. We can apply this effect to any element. This article contains some basic usage of a hover class in HTML and CSS.

Purpose of the Hover Effect

In any document or browser, we use the links to websites for the assistance of the user. For this purpose, we can style the links for the pages that are not yet visited by using the link selector class. Similarly, for those links that are already visited, we use the visited selector. An active selector is used for the active links. These are all the link styles which show the effects on hover. If the link and the selector of the links that are visited are both present in the CSS definition, we use a hover selector class to see the resultant effect.

On the other hand, whenever we want to hover on any element in HTML, it causes some effects by using some properties in CSS, either on the existing content or on the new element form as a result of hover.

Syntax of the Hover Element

Content_of_HTML :hover{
// declare CSS code or effects you want to apply.

Example 1: Hover Changes the Color of the Text

This example deals with the transformation of the text when we move the cursor of the mouse towards it. We can apply the several conditions to the text. But for now, the two basic changes that follow are: the change in color of the text on which the hover is applied and the highlight of the text with a change in the background color.

Starting with the HTML head section, use the style tag inside it as we are doing an internal style. Use the style section inside the <head> tag. A hover class is used to apply all the effects on the text of the heading. So, h1 is used with the hover class.

H1: hover {
Color: white;
Background-color: Purple;

The two properties, as we discussed earlier, are applied. By default, the color of the heading is black and the background color of the webpage is white. But on hover, the background color of that specified portion becomes purple, so the text color also changes into white.

HTML CSS code:

Close the style tag and the head section of HTML. Moving towards the body portion, a heading1 is declared. The alignment for the heading1 <h1> is set to center. Close all the tags and save the text editors file. To execute the output, we need to run the file in the browser. While saving the file, one thing should be kept in mind: save the file with the HTML extension instead of saving it with the text extension. Open with the default browser so you can get the output.


The output in the browser is captured in the form of a few-second video that leads to the excess in displaying the results. On the execution of the file, you will see that a simple heading in the center of the webpage appears. When we take the cursor close to the heading or hover over the heading, the background color and the font color is changed. Whenever the cursor is moved back, it comes back to default.

Example 2: Hover Builds a Block with Text

Unlike in the previous example where the existing text was changed on hover, in this example, a new content (block) of HTML is added that is shown only when we hover over the specified text. This block also have some dimensions and specifications. Let us elaborate on the procedure.

Starting with the CSS section, we tyle a div. This div creates a block of content that is the result of hovering over the text. The width and height are the two basic values applied to form any shape in HTML. Next is the padding property. It is the distance area of the content inside a block or a shape. For example, we have taken a text inside the block, so the distance of the text and the boundary of the shape is taken as the padding. If only the padding is used, then it means that it is the distance inside the box on every side. If the padding is done from a specified side, since we used the padding from the right, then it means that it is the distance on the right side. This property keeps the text inside the boundary of the block. Otherwise, there are chances of exceeding the text out of the border of the block.

Padding: 20px;
Padding-right: 50px;

This padding effect is applied to align the inner content with the outer content. The value is taken in pixels.

CSS code:

The font size and the font color of the text are applied to the text inside the block. The next style section is about the heading which we applied in the hover. As the content block is created inside the div, div is included in this type of styling together. The block shape content is created that is mentioned to form a display.

H3: hover + div {
Display: block;

After that, close the style and head tags. Declare a heading inside the HTML body. A div is formed. The text that will be mentioned inside the block is also written inside the div tags. Close the body tag.

HTML Body Code:

Save the code in the file and run it in the browser. As an output of the previous code, we took a small portion of the video to elaborate on the working of the hover class that is created and designed to create a block with a text inside the block.


The video shows that a simple text as a heading is displayed when we run the file in the browser. But when we hover over the text, it causes a change on the web page. On hover, the text of the heading remains the same as it is at the time of execution. But a block on the left side of the page is created every time we move the cursor towards the heading. When we move the cursor away from the heading, the block vanishes. This is because the hover class creates a block and text inside it. All the effects on the block and text are applied in CSS.


CSS hover is a property that is used to prominent or highlight the HTML content when we move the cursor towards them. This function is mostly used to notify about something. In this article, we explained the working of a hover class, and how the HTML contents are transformed in hover. At the start, we gave a brief overview of the hover class. We implemented the two basic examples of the hover effect. The first example contains the effect on the existing text, whereas the second example is about showing an additional shape hovering towards the existing text while the existing text remains the same.

Source link