如何将 css 应用于不在残疾父级内的 img？

问题描述

我还没有找到在图像上应用悬停效果的有效方法，但前提是它不在禁用元素内。我认为这个 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> 

解决方法

使用 disabled attribute 选择器 => [disabled] 而没有 everything 选择器。 *:not([disabled])

还要添加子选择器 > 以指示 img.action.hover 是 {{1} 的 子 }} ==> *:not([disabled])

*:not([disabled]) > img.action:hover

*:not([disabled]) > img.action:hover {
  border-radius: 35%;
  border: 1px;
  background: red;
}

,

您可以做相反的事情：为所有图像设置悬停，然后在禁用元素内将其移除。这允许使用最通用的选择器。

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>