我如何将 css 应用到不在禁用父对象中的 img？

Question

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

Answer 1

使用 disabled attribute 选择器 => [disabled] 不带 everything 选择器里面。 *:not([disabled])

同时添加 child 选择器 > 以表明 img.action.hover 是 child *: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>

Answer 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>

我如何将 css 应用到不在禁用父对象中的 img？

How can I apply css to an img that is not inside a disabled parent?

html

css

hover