Hover selector in CSS3

How to give style to the particular element when we keep mouse over on it in CSS3?

By using hover selector we can give style to the particular element when we keep mouse over on the element. The hover selector can be used to all elements.

<style>
        a:hover {
            color:blue;
            background-color: pink;
        }
        input:hover {
        color:green;
        background-color:orange;
        }
        div:hover {
        color:red;
        }

</style>

<body>
    <h3>Place the cursor on below elements to change the color</h3>
    <br />
    <form>
        <input type="text" name="txt" placeholder="Keep the cursor here"/>
    </form>
    <br />
    <div>This is 'div' element.</div>
    <br />
    <a href="http://www.techfunda.com" title="DotnetFunda.com">Touch Me!</a>
</body>

In the above code snippet we have given style to the <input> tag, <div> tag and <a> tag. In the output we can notice that the colour of these elements will change by keeping the cursor (hovering) on them.

OUTPUT

Views: 3129 | Post Order: 25

CSS3 > Selectors

Hover selector in CSS3

How to give style to the particular element when we keep mouse over on it in CSS3?

Related Posts

Utility Tools