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: 3175

Answers (1)

Akshay
Akshay

Reputation: 14348

You can try 

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

Upvotes: 4

Related Questions