Установка [CSS]: наведение и: проверенное условие

ProgramBox

Установка [CSS]: наведение и: проверенное условие

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

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня применен эффект наведения —

 td img.off{
    display:none;
}

td:hover img.off{
    display:inline;
}

td:hover img.on{
    display:none;
}

— на некоторых изображениях.

 <td>
    <div class="col1"><img class="on" src="1.bmp"></div>
    <div class="col1"><img class="off" src="2.bmp"></div>
</td>

Я пытаюсь добавить флажок, который отключает эффект наведения, если он активен, поэтому я попытался сделать —

 input:checked   td:hover img.off{
    display:inline;
}

input:checked   td:hover img.on{
    display:none;
}

— с этим флажком:

 <input type="checkbox" name="box" class="cbox">

Но это не сработало. Я ищу решение HTML / CSS для этого. Кто-нибудь знает, почему это не работает?

РЕДАКТИРОВАТЬ: что здесь не так? РЕДАКТИРОВАТЬ ^ 2: селектор родственных элементов. Даже не могу.

 input {
  display: none;
}
label[for="chkbox1"] {
  display: inline-block;
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
input:checked   .header label:after {
  content: 'X';
}
table td img.off{
  display:none;
}
input:checked   table td:hover img.off{
  display:inline;
}
input:checked   table td:hover img.on{
  display:none;
}

 <input id="chkbox1" type="checkbox" name="box" class="cbox">

<div class="header">
  <label for="chkbox1"></label>
</div>

<table>
  <tr>
    <td>
      <div class="col1">
        <img class="on" src="http://placehold.it/50">
      </div>
      <div class="col1">
        <img class="off" src="http://placehold.it/100">
      </div>
    </td>
  </tr>
</table>

1. Можете ли вы создать скрипку?

2. input:checked td:hover означает, что флажок будет непосредственно предшествующим родственным элементом td. Это не имеет смысла структурно, поэтому я предполагаю, что у вас на самом деле нет вашего HTML в таком порядке.

3. флажок находится в заголовке. Есть ли способ сделать это разумным?

Ответ №1:

Основываясь на вашем опубликованном коде, я предполагаю приведенную ниже разметку.

Селектор sibling нацелен на sibling, и в приведенном ниже случае это будет table , а не td

 input:checked   table td:hover img.on {
  border: 2px solid red;
}

 <input type="checkbox" name="box" class="cbox">
<table>
  <tr>
    <td>
      <div class="col1">
        <img class="on" src="http://placehold.it/50">
      </div>
    </td>
  </tr>
</table>

Если вы хотите, чтобы флажок был в заголовке, вам нужно выполнить трюк с использованием метки, например

 input {
  display: none;
}
label[for="chkbox1"] {
  display: inline-block;
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
input:checked ~ table td:hover img.on {
  border: 2px solid red;
}
input:checked   .header label:after {
  content: 'X';
}

 <input id="chkbox1" type="checkbox" name="box" class="cbox">

<div class="header">
  <label for="chkbox1"></label>
</div>

<table>
  <tr>
    <td>
      <div class="col1">
        <img class="on" src="http://placehold.it/50">
      </div>
    </td>
  </tr>
</table>

Чтобы уточнить, что НЕ сработает, ниже приведен пример, поскольку фактический checkbox является дочерним элементом header и не может быть достигнут с img помощью селектора родственных элементов.

Для этого потребуется родительский селектор, которого (пока) не существует

 input:checked ~ table td:hover img.on {
  border: 2px solid red;
}

 <div class="header">
  <input id="chkbox1" type="checkbox" name="box" class="cbox">
</div>

<table>
  <tr>
    <td>
      <div class="col1">
        <img class="on" src="http://placehold.it/50">
      </div>
    </td>
  </tr>
</table>

Обновление после редактирования вопроса

Вам нужно использовать селектор ~ родственных элементов, а не селектор непосредственных родственных элементов, поскольку table он не является непосредственным родственным элементом input

 input {
  display: none;
}
label[for="chkbox1"] {
  display: inline-block;
  border: 1px solid black;
  width: 20px;
  height: 20px;
}
input:checked   .header label:after {
  content: 'X';
}
table td img.off {
  display:none;
}
input:checked ~ table td:hover img.off {
  display:inline;
}
input:checked ~ table td:hover img.on {
  display:none;
}

 <input id="chkbox1" type="checkbox" name="box" class="cbox">

<div class="header">
  <label for="chkbox1"></label>
</div>

<table>
  <tr>
    <td>
      <div class="col1">
        <img class="on" src="http://placehold.it/50/0f0">
      </div>
      <div class="col1">
        <img class="off" src="http://placehold.it/100/0ff">
      </div>
    </td>
  </tr>
</table>

1. Извините, когда я сказал заголовок, я имел в виду, что у меня был «заголовок». Например, заголовок определенного раздела (?) { }. Это работало бы так, как я хочу, если бы оно находилось за пределами этого заголовка. Есть ли способ его настроить?

2. @AlexG Пока фактический checkbox элемент является родственным элементу, с которым вы хотите, чтобы он взаимодействовал, он будет нормально работать без метки.

3. @AlexG обновил мой ответ «заголовком»

4. Происходит что-то действительно странное. Я больше не могу установить флажок? Теперь это, по сути, картинка?

5. @AlexG снова обновил мой ответ, приведя 3-й пример, показывающий, что НЕ будет работать