CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Dhiraj
Dhiraj

Reputation: 910

How can i use hover property with two classes

I have two css classes

    .circle-btn{
    }
    .circle-btn-medium{
    }

Hhowever both classes having their own properties. But at hover property I want to use same background color for both.

One solution i found is what to use hover property seperatly as follows

.circle-btn:hover
{
    background-color:#39C11E;
}
.circle-btn-medium:hover
{
    background-color:#39C11E;
}

So instead of using hover property separately is it possible to use this property with different classes at same time so I can optimize my coding?

Upvotes: 0

Views: 108

Answers (2)

cassln
cassln

Reputation: 732

You can use one or two classes in your html. So -medium will be modifier, which responce only for size.

For example:

css: 

.circle-btn{
}
.circle-btn-medium{
}
.circle-btn:hover
{
     background-color:#39C11E;
}

html: 

 <!-- common circle-btn -->
 <button class="circle-btn">circle button</button>

 <!-- medium circle-btn -->
 <button class="circle-btn circle-btn-medium">circle medium button</button>

By the way, this is bootstrap way. Just look, for example, to their buttons sizes modifiers.

Upvotes: 0

John Christopher Eniego
John Christopher Eniego

Reputation: 161

You can minimize it by joining the 2 class in to one .. 

.circle-btn:hover , 
.circle-btn-medium:hover {
    background-color: #39c11E;
}

Upvotes: 6

Related Questions