CSS: проверено отсутствие изменения типа отображения

ProgramBox

CSS: проверено отсутствие изменения типа отображения

Post author:admin
Запись опубликована:2 апреля, 2023
Post category:Вопросы по программированию

#html #css #display #checked

#HTML #css #отображать #проверено

Вопрос:

:Проверено работает, поскольку он изменяет цвет фона самой метки, но по какой-то причине он не работает с отображением.

Я пытаюсь установить для него значение display: none, чтобы полностью скрыть его и заменить другим набором изображений. Поэтому белые изображения и черные изображения

Следующий код — это все, что связано с изменяемыми элементами. Использование !important не устранит проблему.

Заранее благодарю вас

 .productInfo {
  display: flex;
  flex-direction: column;
  padding-top: 135px;
  height: 1500px;
}

.imagesAndinfo {
  display: grid;
  grid-gap: 30px;
  margin-left: -30px;
  width: 90vw;
  grid-template-columns: 40px 60% auto;
  height: 100%
}

.images {
  grid-column: 2/3;
  width: 100%;
  height: 130%;
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 50% 50%;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-content: center;
}

.img {
  width: 100%;
  max-height: 100%;
}

.images .top {
  grid-column: 1/3;
  grid-row: 1/3;
}

.images .mid1 {
  grid-column: 1/2;
  grid-row: 3/4;
  background: linear-gradient(0deg, rgba(237, 237, 237, 1) 35%, rgba(255, 255, 255, 1) 100%);
}

.images .mid2 {
  grid-column: 2/3;
  grid-row: 3/4;
  background: linear-gradient(0deg, rgba(237, 237, 237, 1) 35%, rgba(255, 255, 255, 1) 100%);
}

.images .mid3 {
  grid-column: 1/2;
  grid-row: 4/5;
  background: linear-gradient(0deg, rgba(237, 237, 237, 1) 35%, rgba(255, 255, 255, 1) 100%);
}

.images .mid4 {
  grid-column: 2/3;
  grid-row: 4/5;
  background: linear-gradient(0deg, rgba(237, 237, 237, 1) 35%, rgba(255, 255, 255, 1) 100%);
}

.black-images .bottom {
  grid-column: 1/3;
  grid-row: 5/7;
}

.white-images .bottom {
  grid-column: 1/2;
  grid-row: 5/6;
}

.black-images {
  display: none;
}

.white-button-color,
.black-button-color {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.colors {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(2, 1fr);
  width: 12%;
  max-width: 150px;
  grid-gap: 15px;
  padding-bottom: 50px;
  height: 5%;
}

.colors h1 {
  margin-bottom: -10px;
  grid-row: 1/2;
  grid-column: 1/3;
  margin-top: 30px;
  font-size: 16px;
}

.white {
  width: 100%;
  max-height: 100%;
  grid-row: 2/3;
  grid-column: 1/2;
  background-color: #ededed;
  border-color: #a5a7aa;
  border-style: solid;
  border-width: 3px;
  border-radius: 3px;
}

.black {
  width: 100%;
  max-height: 100%;
  grid-row: 2/3;
  grid-column: 2/3;
  background-color: #1c1c1c;
  border-color: #2d2d2d;
  border-style: solid;
  border-width: 3px;
  border-radius: 3px;
}

.img:hover {
  border-style: solid;
  border-color: #1c1c1c;
  border-radius: 3px;
  border-width: 2px;
  cursor: pointer;
}

.white-button-color:checked~.white-images img {
  display: none;
}

 <div class="productInfo">
  <p class="nav">Products / Headsets / Arctis 7</p>
  <div class="imagesAndinfo">
    <div class="images white-images">
      <img class="top img" src="https://media.steelseriescdn.com/thumbs/filer_public/13/9c/139cd0b0-d085-4d96-9314-edb8438db7e6/a7_white_buy_001.jpg__1850x800_q100_crop-scale_optimize_subsampling-2.jpg" alt="">
      <img class="mid1 img" src="https://media.steelseriescdn.com/thumbs/filer_public/b3/bd/b3bdb8b8-2400-4575-b874-8b25a808b820/purchase-gallery-arctis-7-2019-white-hero.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid2 img" src="https://media.steelseriescdn.com/thumbs/filer_public/67/3a/673a25f8-0dbe-471b-9d5a-f21806083332/purchase-gallery-arctis-7-2019-white-side.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid3 img" src="https://media.steelseriescdn.com/thumbs/filer_public/ba/5b/ba5b1ece-2cc0-4f6d-8adf-4d5e2ce483bd/purchase-gallery-arctis-7-2019-white-front.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid4 img" src="https://media.steelseriescdn.com/thumbs/filer_public/f6/9b/f69b5fd1-badb-409b-8875-b3bcf9c6d90e/purchase-gallery-arctis-7-2019-white-lay.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="bottom img" src="https://media.steelseriescdn.com/thumbs/filer_public/ea/8c/ea8c5209-dff2-49f7-9d88-b39811229023/purchase-gallery-arctis-7-2019-white-box.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
    </div>
    <div class="images black-images">
      <img class="top img" src="https://media.steelseriescdn.com/thumbs/filer_public/59/13/591332b6-98fe-4a7b-98ce-a7048b8e0fda/a7_buy_001.jpg__1850x800_q100_crop-scale_optimize_subsampling-2.jpg" alt="">
      <img class="mid1 img" src="https://media.steelseriescdn.com/thumbs/filer_public/99/ef/99efd867-6813-4e70-814f-a200f58f40f6/purchase-gallery-arctis-7-2019-black-hero.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid2 img" src="https://media.steelseriescdn.com/thumbs/filer_public/3e/b5/3eb5e245-3aa0-492d-8531-9ddcaac5da92/purchase-gallery-arctis-7-2019-black-side.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid3 img" src="https://media.steelseriescdn.com/thumbs/filer_public/92/d3/92d34281-0989-44a3-b655-8c22e2569440/purchase-gallery-arctis-7-2019-black-front.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="mid4 img" src="https://media.steelseriescdn.com/thumbs/filer_public/4a/1f/4a1f8221-51fc-4719-a99b-c62656db5227/purchase-gallery-arctis-7-2019-black-lay.png__1850x800_q100_crop-scale_optimize_subsampling-2.png" alt="">
      <img class="bottom img" src="https://media.steelseriescdn.com/thumbs/filer_public/85/97/8597c9b8-c748-4b51-b88d-5539a380a11a/a7_buy_005.jpg__1850x800_q100_crop-scale_optimize_subsampling-2.jpg" alt="">
    </div>
  </div>
  <div class="info">
    <h1 class="title">ARCTIS 7</h1>
    <h2 class="edition">2019 Edition</h2>
    <div class="colors">
      <h1>COLOR:</h1>
      <input type="checkbox" class="white-button-color" id="white-button">
      <label class="white" for="white-button"></label>
      <input type="checkbox" class="black-button-color" id="black-button">
      <label class="black" for="black-button"></label>
    </div>
    <h2 class="price">179,99€</h2>
    <button type="button" name="button">Add to cart</button>
  </div>

1. В предоставленном коде нет .white-button-color элемента.

2. .белая кнопка-цвет: проверено .белые изображения img { отображение: отсутствует; }

3. пожалуйста, укажите флажок

4. Ваш селектор неверен; ~ (символ тильды, комбинатор последующих родственных элементов ) будет выбирать только родственные элементы, и только те родственные элементы, которые встречаются позже в документе. Что вы хотите, учитывая, что HTML в настоящее время невозможен с CSS.

5. Итак, если бы я хотел изменить изображения, либо изменить их источник, либо изменить отображение белых изображений на none, а черных изображений на grid, мне пришлось бы использовать JS?

Ответ №1:

Попробуйте установить этот calss:

 .white-button-color:checked~.white-images img {
  display: none;
}

к этому:

 .img:checked{
      display: none;
    }

Ответ №2:

Вы не можете делать то, что пытаетесь сделать с помощью css, вы не можете, так сказать, «искать». Вы можете только «смотреть вниз». Вы не можете пытаться выбрать элемент, который находится в верхней части дерева DOM.

Если вам абсолютно необходимо сделать то, что вы пытаетесь сделать, вы можете изменить порядок элементов в DOM, а затем использовать flex-direction для изменения визуальной иерархии