Zabrániť tomu, aby sa element zdedil CSS - javascript, jquery, html, css

i "d by som rád vedel, či existuje spôsob, ako zabrániť tomu, aby detský prvok zdedil rodičovský css, napríklad mám niečo ako:

<div class="MenuSections>
<figure class="MenuIcon">
<img.../>
<figcaption class="MenuCaption">
</figure>
</div>

Potom pomocou nástroja JQuery zmeníte farbu sekcie a titulku pri kliknutí na sekciu:

$(this).find("div").css("background-color", "white");
$(this).find(".MenuCaption").css("color", "Darkgreen");

Ale keď je môj img transparentný, nebude to viditeľné na bielom pozadí.

Viem, že môžete prepísať css vlastnosti na detské elementy, ale samozrejme to nebude fungovať na img elemente, tak čo môžem urobiť?

Poznámky:

• BG farby nie sú obchodovateľné
• poloha: absolútna môže byť použitá
• Img Musí byť transparentný, takže nemôžem prepínať medzi imgami na JQuery

odpovede:

Selektory CSS môžete použiť v rámci Jquery.

Takže vo vašom kóde Jquery môžete urobiť niečo podobné.

$(this).find("div *:not(<input element not to be selected>)).css("background-color", "white");

* Deklaruje všetky prvky ... takže všetky prvky, ktoré nie sú to, čo ste vybrali.

Viac informácií nájdete na tejto stránke: https://api.jquery.com/category/selectors/