CODEWITHSUNDEEP
htmlcsshover
Iulia
Iulia

Reputation: 1

html :hover on div border style

I have a div with round corners. When the mouse is above the div, the corners need to be right. How can I do that?

This is what I wrote so far:

<style>
    #ex1
    {
        border: 2px outset black;
        border-radius: 25px;
        padding: 10px;
        background-color: transparent;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

</style>

<style>
    #ex1:hover
    {
        border-style: solid;
        background-color: transparent;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Upvotes: 0

Views: 439

Answers (2)

Manoj Prathab
Manoj Prathab

Reputation: 11

You don't need to repeat the same style again for hover also. you just need to put the changes what you want to see in the hover styles.

#ex1:hover
{
    border-style: solid;
    border-radius: 0px;
}

Upvotes: 1

user11545410
user11545410

Reputation:

As Craig posted:

<style>
    #ex1 {
        border: 2px outset black;
        border-radius: 25px;
        padding: 10px;
        background-color: transparent;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #ex1:hover {
        border-style: solid;
        border-radius: 0;
    }
</style>

Upvotes: 0

Related Questions