What is the best way to style an image with CSS when it is not contained within a disabled parent element?

Struggling to find a way to add a hover effect to an image that is not inside a disabled element? Although it seems like the css selector below should do the trick, it doesn't quite work as expected. In this scenario, I only want the hover effect on examples #2 and #3, excluding #1 because it is within a disabled button.

*: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>

htmlcsshover

Answer №1

Try utilizing the disabled attribute selector => [disabled] minus the everything selector within it. *:not([disabled])

Additionally, incorporate the child selector > to specify that img.action.hover is a child of *: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.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>

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

Answer №2

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When hovering over individual links within a set of blocks, ensure that the other links are not affected or disrupted

I need help creating a forum category link guide. Similar to this example... Specifically, I want it to display as Forums > The Financial Roadmap Two issues I am facing are: when hovering over the link, it shifts down one row and how can I add blocks ...

htmlcss

Updating values using jQuery when tags in a single table row are changed

In my current setup, I have a table structured as follows: <table> <tbody> <tr> <td> <input type="text" class="identifier" /> </td> <td class="name"> Some value < ...

jqueryhtml

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

htmlcsssvgcss-animations

Display completed survey

I am in the process of developing a mobile app that allows users to answer questions in a questionnaire. Once the questionnaire is completed, the user can save it in LocalStorage. Upon revisiting the page, the user will see all previously answered question ...

htmlangularionic-framework

Tips for dividing echo output from PHP into two separate divs using jQuery AJAX

I am trying to display two different echoes from PHP in separate divs within my AJAX success function. $.ajax({ url: 'counter.php', type: 'POST', data: { some_data:some_data ...

phphtmljqueryajax

Maintaining Styles After Focus is Removed in CSS: A Guide

The CSS that styles our buttons is as follows: .btn-outline-primary { color: blue; border: 1px solid blue; background: transparent; transition: all 0.3s ease 0s; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: ...

cssangularjsbuttonfocus

I am looking to enhance a button's appearance by applying CSS styling with a combination of two distinct flat colors

Is there a way to apply CSS styling to a button by incorporating two distinct flat colors? Specifically, I would like the left half of the button to be blue and the right half to be red. ...

htmlcss

Bootstrap 4.0. When it comes to buttons, they seem to have trouble cooperating with other DIV elements

Today is my first time seeking help on StackOverflow: I'm encountering an issue with my website where the floating arrow at the bottom of the page is obstructing my ability to click on buttons. Whether it's a Bootstrap button or HTML button, non ...

htmlcsstwitter-bootstrapbuttonbootstrap-4

Include a horizontal line divider between each row of items that wrap to the next line

I am utilizing CSS flexbox to arrange a variable number of items in rows, wrapping around to additional rows as necessary. My query is, can a horizontal line be inserted between each of the rows? Here you can find a basic example of what I am working on. ...

htmlcssflexbox

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

htmlcssheight

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

jqueryhtmlslideup

What is the best method to activate a button only when the appropriate radio buttons have been chosen?

Just dipping my toes into the world of javascript. I've created a form with a set of "Yes/No" radio buttons, and I attempted to create a function that will disable the "Submit Form" button if any of the following conditions are met: If one or more r ...

javascripthtmlformsbuttonradio-button

Incorporate web control's stylesheet into page with UpdatePanel registration

What is the most effective way to register a stylesheet only once on a page using a custom web control? Keep in mind that the page utilizes an UpdatePanel for asynchronous calls. I attempted placing the <link> tag in ScriptManager.RegisterClientScrip ...

asp.netcssuser-controlsstylesheetweb-controls

Using HTML symbols can alter the height of the text

It seems like I'm making a mistake - whenever I try to include an HTML symbol before a word, the following word without the HTML symbol ends up with a different height and is not on the same line. ...

htmlcsssymbols

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

cssflexboxbootstrap-5

Safari experiencing a problem with the CSS mix-blend-mode: difference

I have been experimenting with a mouseover effect using mix-blend-mode. The effect is functioning as desired in Chrome and Firefox. .btn-anim { position: relative; display: inline-block; overflow: hidden; padding: 1.25rem; color: #fff; --x: 6 ...

cssmix-blend-mode

Challenges with HTML and Session Handling

It's not functioning properly! <?php session_start(); ?> <p class="username"><?php echo $_SESSION['name']; ?></p> ...

phphtml

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

csshtml

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Opting for HTML tags directly rather than using div.class

On my blogsite, I have implemented special tags that are designed to be user-friendly for my colleagues who may not be familiar with HTML. For instance: <question>...</question> and <answer>...</answer> These tags are then style ...

htmlcross-browser