Блог

Главная - Вопросы по программированию - Как я могу применить css к img, который не находится внутри отключенного родителя?

Как я могу применить css к img, который не находится внутри отключенного родителя?

#html #css #hover

Вопрос:

Я не нашел эффективного способа применить эффект наведения на изображение, но только если оно не находится внутри отключенного элемента. Я бы подумал, что этот селектор css будет работать, но, похоже, это не так. В этом примере я бы хотел, чтобы эффект наведения был в примерах № 2 и № 3, но не в № 1, потому что он находится в отключенной кнопке.

 *:not(*:disabled) img.action:hover {
    border-radius: 35%; 
    border: 1px;
    background: red;
} 
 <button name="example#1" class="action" type="button" 
 value="Edit"  disabled>
   <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</button>

<span name="example#2">
   <a href="index.php">
      <img class="action" src="https://i.stack.imgur.com/3ATqJ.png" >
   </a>
   </span>

<div name="Example#3">
   <img class="action" src="https://i.stack.imgur.com/3ATqJ.png" >
</div>

Ответ №1:

Используйте отключенный селектор атрибутов => > [disabled] без селектора » все » внутри. *:not([disabled])

Также добавьте дочерний селектор > , чтобы указать, что img.action.hover он является дочерним *:not([disabled]) ==> *:not([disabled]) > img.action:hover 

 *:not([disabled]) > img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
} 
 <button name="example#1" class="action" type="button" value="Edit" disabled>
   <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</button>

<span name="example#2">
   <a href="index.php">
      <img class="action" src="https://i.stack.imgur.com/3ATqJ.png" >
   </a>
   </span>

<div name="Example#3">
  <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</div>

<span name="Example#4">
  <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</span>

Комментарии:

1. Это приведет к ошибке с немного другим HTML-кодом. Например, не работает, если вокруг изображения в примере № 1 есть промежуток.

Ответ №2:

Вы могли бы сделать наоборот: установить курсор для всех изображений, а затем удалить его, когда он находится внутри отключенного элемента. Это позволяет использовать самые общие селекторы.

 img.action {
  width: 60px;
  height: 60px;
}

img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
}

[disabled] img.action:hover {
  border-radius: initial;
  border: initial;
  background: initial;
} 
 <button name="example#1" class="action" type="button" value="Edit" disabled>
  <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</button>

<span name="example#2">
  <a href="index.php">
    <img class="action" src="https://i.stack.imgur.com/3ATqJ.png" >
  </a>
</span>

<div name="Example#3">
  <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</div>

<button name="example#4" class="action" type="button" value="Edit" disabled>
  <div>
    <span>
      <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
    </span>
  </div>
</button>

Однако на самом деле вам, вероятно, не нужно учитывать все возможности под солнцем, поэтому вы могли бы немного сузить свой выбор. Например, поскольку все ваши примеры имеют name атрибут, вы могли бы сделать что-то вроде:

 img.action {
  width: 60px;
  height: 60px;
}

[name]:not([disabled]) img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
} 
 <button name="example#1" class="action" type="button" value="Edit" disabled>
  <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</button>

<span name="example#2">
  <a href="index.php">
    <img class="action" src="https://i.stack.imgur.com/3ATqJ.png" >
  </a>
</span>

<div name="Example#3">
  <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
</div>

<button name="example#4" class="action" type="button" value="Edit" disabled>
  <div>
    <span>
      <img class="action" src="https://i.stack.imgur.com/3ATqJ.png">
    </span>
  </div>
</button>
Метки: ,