One approach is to reverse the process: apply hover effects to all images and then remove them when inside a disabled element. This allows for more versatile selectors.
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.sstatic.net/3ATqJ.png">
</button>
<span name="example#2">
<a href="index.php">
<img class="action" src="https://i.sstatic.net/3ATqJ.png" >
</a>
</span>
<div name="Example#3">
<img class="action" src="https://i.sstatic.net/3ATqJ.png">
</div>
<button name="example#4" class="action" type="button" value="Edit" disabled>
<div>
<span>
<img class="action" src="https://i.sstatic.net/3ATqJ.png">
</span>
</div>
</button>
However, you may not need to cover every possibility, so you could refine your selector. For example, if all examples have a name attribute, you could use:
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.sstatic.net/3ATqJ.png">
</button>
<span name="example#2">
<a href="index.php">
<img class="action" src="https://i.sstatic.net/3ATqJ.png" >
</a>
</span>
<div name="Example#3">
<img class="action" src="https://i.sstatic.net/3ATqJ.png">
</div>
<button name="example#4" class="action" type="button" value="Edit" disabled>
<div>
<span>
<img class="action" src="https://i.sstatic.net/3ATqJ.png">
</span>
</div>
</button>