Topics

Kevin Powell - Community•2y ago

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋

Quick selector question

.column-diensten:hover > .column-diensten .et_pb_blurb_0 .et-pb-icon,
.column-diensten:hover > .column-diensten .et_pb_module_header,
.column-diensten:hover > .column-diensten .et_pb_button{
    filter: invert(100%) !important;
}

.column-diensten:hover > .column-diensten .et_pb_blurb_0 .et-pb-icon,
.column-diensten:hover > .column-diensten .et_pb_module_header,
.column-diensten:hover > .column-diensten .et_pb_button{
    filter: invert(100%) !important;
}

13 Replies

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

What is wrong with this code? I'm trying to make it that when i hover on the .column-diensten, every other class mentioned will invert

Mannix•2y ago

first one will work for an element with class .et-pb-icon that is inside element with class .et_ob_blurb_0 that is inside element with class .column-diensten that is inside element with class column-diensten

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

So maybe something like this? I deleted the class .column-diensten after the ">"

.column-diensten:hover > .et_pb_blurb_0 .et-pb-icon
.column-diensten:hover > .et_pb_module_header
.column-diensten:hover > .et_pb_button{
    filter: invert(100%) !important;
}

.column-diensten:hover > .et_pb_blurb_0 .et-pb-icon
.column-diensten:hover > .et_pb_module_header
.column-diensten:hover > .et_pb_button{
    filter: invert(100%) !important;
}

Mannix•2y ago

this is html https://codepen.io/MannixMD/pen/rNvPLxV

CodePen

...

Mannix•2y ago

i'm guessing your is different

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

this is my html, i'm working in wordpress

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

i'm trying to say, when i hover over the grey area '.column-diensten' Then everything will turn white or invert

Mannix•2y ago

try .column-diensten * {}

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

that works except for the button

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

Mannix•2y ago

then you need add separate rule for button. I suspect specificity issue

MarkBoots•2y ago

tip: use your inspector and see what styles are applied on the button.

Ã̶̅n̴̊͑k̴̾͌s̵̒̐e̵͗̒l̴̿͋•2y ago

i somehow found it thanks! didn't know you could use * wiht something like this

Kevin Powell - Community Join

A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.

34KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

jq memory issuejq is using too much ram, is there a way to limit the amount of memory usage?Common BreakpointsIs there a list of common breakpoints most websites use? Having trouble figuring out and finding com best book for javascript for beginenrI am beginner in web, please suggess best book for to learn JavaScript as beginner Unwanted undefined key in objectStarting from an array like this: ```ts gridColumns = [ { field: "exam_Internalcode", Over scrollingWhen I scroll I scroll one section at a time which is working. However, if the user keep scrolling i Digital ocean droplet docker build no space available errorDocker is creating this issue on each new re-build on github actions any idea how can I prevent this why are my borders not circular?So, I’m not understanding why my borders for my numbers are more oval shaped than circular? I tried How to work around PDFs in react so that if a table doesn't fit in a page, it moves to the nextCurrently I'm working on a project where I'm converting HTML to PDF. The issue I've run into is if a Check if id exists using node-postgresWIth MongoDB & Mongoose, I could check if an id exists like so: ```JS if (!mongoose.Types.ObjectId.i Issue with space between, flex-wrap, and centering when only 1 item fits.Two separate sections, at 600 break point I am switching the items to be flex wrap and space betwee