Ответ в вашем же коде:
.hid:hover {
opacity: 0.5; /* Тут */
color: white;
}
.cart:hover .hid {
opacity: 1; /* И вот тут */
-webkit-transition: all.5s ease;
-moz-transition: all.5s ease;
-o-transition: all.5s ease;
transition: all.5s ease;
}
Думаю Ваш блок выглядит примерно так:
<div class="cart">
<div class="hid">
<!-- *** -->
</div>
</div>
Тут получается так, что при наведение на hid
вы наводите и на cart
=> получается что hid
применит последний ховер эффект, которым является .cart:hover .hid
, где opacity: 1;
.
HTML код ничего не дал.. Вариантов может быть много, прям с ходу только два:
1 вариант
body {
font-size: 0;
}
.cart {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 0 5px 5px;
background: #999;
}
.cart .hid {
display: block;
width: 50px;
height: 50px;
margin: 25px;
background: #333;
}
.cart:hover .hid {
background: red;
}
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
2 вариант
body {
font-size: 0;
}
.cart {
display: inline-block;
width: 100px;
height: 100px;
margin: 0 0 5px 5px;
background: #999;
}
.cart .hid {
display: block;
width: 50px;
height: 50px;
margin: 25px;
background: #333;
}
.carts:hover .cart:not(:hover) {
opacity: .25;
}
.cart:hover {
opacity: 1;
}
.cart:hover .hid {
background: red;
}
<div class="carts">
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
<div class="cart">
<div class="hid"></div>
</div>
</div>