0

Как мне сделать чтобы opacity применялось только к классу cart, но не к классу hid

.cart {
  border: 1px solid #EFECEC;
  margin: 10px;
}

.cart:hover {
  opacity: 0.8;
}

.hid {
  display: none;
}

.cart:hover .hid {
  display: block;
  position: absolute;
  margin-top: 10em;
  margin-left: 7em;
  font-size: large;
  color: white;
  background: black;
  opacity: 1;
}
<div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12  cart ">
  <div class='hid'><a href="productPage.php#${key}">Перейти</a></div>
  <div class="item">
    <div class="pro-img">
      <img src="pages/orderPage/goods/${data[key].img}" width="100em" height="100em">
    </div>
    <div class="prod">
      <h4 class='name'>${data[key].name}</h4>
    </div>
  </div>
</div>

3
  • При такой верстке ни как... opacity - наследуется...
    – Air
    3 окт 2018 в 10:41
  • подскажите пожалуйста,как умнее тогда сделать 3 окт 2018 в 10:42
  • 1
    сделать эти блоки соседями
    – Air
    3 окт 2018 в 10:42

1 ответ 1

0

Если задача в том, чтобы сделать прозрачными все элементы внутри .cart кроме .hid, можно воспользоваться таким правилом:

.cart:hover *:not(.hid){
  opacity: 0.8
}

.cart {
  border: 1px solid #EFECEC;
  margin: 10px;
}

.cart:hover *:not(.hid){
  opacity: 0.8
}

.hid {
  display: none;
}

.cart:hover .hid {
  display: block;
  position: absolute;
  margin-top: 10em;
  margin-left: 7em;
  font-size: large;
  color: white;
  background: black;
}
<div class=" col-lg-3 col-md-3 col-sm-6 col-xs-12  cart ">
  <div class='hid'><a href="productPage.php#${key}">Перейти</a></div>
  <div class="item">
    <div class="pro-img">
      <img src="pages/orderPage/goods/${data[key].img}" width="100em" height="100em">
    </div>
    <div class="prod">
      <h4 class='name'>${data[key].name}</h4>
    </div>
  </div>
</div>

4
  • не помогает почему то 3 окт 2018 в 11:25
  • @КириллЧетвертков Добавил код на основе вашего примера. Нажмите синюю кнопку "Выполнить код" 3 окт 2018 в 11:28
  • а что можно сделать чтобы блок hid отображался в центре,то есть в блоке с классом cart, а не в его пределах как сейчас? 3 окт 2018 в 11:32
  • Убрать у него position:absolute и перенести после блока .prod 3 окт 2018 в 11:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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