0

При наведении на картинку появляется блок .hid, далее при наведении на hid, нужно чтобы срабатывал opacity, но ничего не происходит. Подскажите пожалуйста в чем проблема?

.hid {
  opacity: 0;
  position: absolute;
  background: #2E2E2E;
  padding:0.6em;
  left: 35%;
  top: 60%;
  color: white;
  border-radius: 5px;
    font-size: medium;
}
.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;
}

введите сюда описание изображения

2 ответа 2

5

Ответ в вашем же коде:

.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>

4
  • а можно что то сделать, чтобы добиться желаемого результата, работая только с этими классами? 23 окт 2018 в 14:57
  • Смотря что вы хотите сделать. Чем больше кода предоставите по данным элементам, тем быстрее и точнее будет решён ваш вопрос.
    – De.Minov
    23 окт 2018 в 15:01
  • Мне нужно,что бы при наведении на hid работал opacity, html код я дополнил 23 окт 2018 в 18:27
  • @КириллЧетвертков, дополнил ответ
    – De.Minov
    24 окт 2018 в 1:11
1

Для решения вашей проблемы необходимо в .hid:hover для opacity: 0.5; задать !important CSS код:

.hid {
    opacity: 0;
    position: absolute;
    background: #2E2E2E;
    padding:0.6em;
    left: 35%;
    top: 60%;
    color: #fff;
    border-radius: 5px;
    font-size: medium;
}

.cart:hover .hid{
    opacity: 1;
    -webkit-transition: all.5s ease;
    -moz-transition:     all.5s ease;
    -o-transition:       all.5s ease;
    transition:          all.5s ease;
}

.hid:hover{
    opacity: .5 !important;
    color: white;
}

В ваших стилях поставьте .hid:hover{} после .cart:hover .hid{}

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.