CODEWITHSUNDEEP
csshover
Wojciech Zieliński
Wojciech Zieliński

Reputation: 77

How to apply css hover on multiple elements

Hi I'm working on simple hover with only css. I'm curious if it's possible to apply one hover to multiple html elements. Here is my example:

.work-cart{
    z-index: 4;
  position: absolute;
    width: 250px;
    height: 300px;
    left: 200px;
    opacity: 0;
    background: #fff;
    padding-right: 45px;
    padding-left: 45px;
    padding-bottom: 30px;
    padding-top: 150px;
    text-align: right;
    bottom: 0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all: 0.8s ease;
    transitions: all 0.8s ease;
}
.f:hover > .work-cart{
   left: 220px;
    opacity: 1;
}
.g:hover > .work-cart{
   left: 220px;
    opacity: 1;
}
.h:hover > .work-cart{
   left: 220px;
    opacity: 1;
}

Is there any option to asign the hover for .f .g and .h at once ?

Upvotes: 3

Views: 3176

Answers (1)

Akshay
Akshay

Reputation: 14378

You can try 

.f:hover > .work-cart, .g:hover > .work-cart, .h:hover > .work-cart{
   left: 220px;
   opacity: 1;
}

Upvotes: 4

Related Questions