Selecting child elements on hover & whole class assignment with jquery

Tagged: , ,

Author Posts

widevisions September 24, 2019 at 4:54 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hi all, newbye here, inexperienced and quite a bad English speaker, so I hope you apologize if sometimes my sentences are not 100% clear, I will try my best.
My questions:
How do I set properties on a child of a parent hovered element using CSS, so when I hover the parent, the children change as expected, instead of the parent itself?
According to my understanding of CSS this should be possible for children and for same level selectors, but not for parent elements when you need jquery instead.
Something like #myid > #mychildid (or a more generic selector) if I remember it correctly.
Second question, is it possible to apply or toggle a whole class instead of a single property, using jquery events?
Thank you in advance for your answers!
Cheers

Sebastian September 25, 2019 at 9:36 am

Hey,

Sorry for the slow reply, it was my wedding anniversary yesterday. In answer to your questions:

How do I set properties on a child of a parent hovered element using CSS, so when I hover the parent, the children change as expected, instead of the parent itself?

Microthemer doesn’t suggest those kinds of selectors by default, so you will need to manually edit the selector code. The following type of selector will do what you need:

.parent-selector:hover .child-selector

This will style all child elements a certain way when the parent is hovered over.

I’m not sure I follow your second question. Would you mind clarifying please?

Thanks,
Sebastian

widevisions September 25, 2019 at 9:49 am

Hi, no worries and my best wishes to you and your wife 😉
Ok so about the CSS selectors, I need to manually edit the selectors, there is no default way to select another element on hover. Good to know 🙂
About my second question, I see that Microthemer has the possibility to change an element property according to some javascript events (click, enter, and so on), not just the CSS events, and apply the property change to a target element different from the source (so it basically allows to create a simple trigger).
But what I see is that I can manage just one single property (i.e. color on click), or I have to set up the same event multiple times for all the properties I want to change (not very efficient).
Is there a workaround or a way that I miss, so I can assign (or toggle) a whole custom class to the target element, using the same process, so I create the class in advance, then I assign it using the existing jquery events?
It is not very different from the previous question, if I hover an element, I can change multiple other elements at the same time, I need a class and a selector for every element, but I can change multiple properties contemporarily). In the other case instead, I have to do more or less the same thing, but using jquery so I can bypass some CSS limitations or complications.
I hope I was more clear now 🙂
Kindest regards

Lorenzo

Sebastian September 25, 2019 at 10:12 am

Hey Lorenzo,

Thanks for the wishes! Yes, I think I understand you now.

You’re right, MT only supports setting one transition value in response to an event via the transition property group. We will add the option to have multiple rows in future, which will make this a bit easier. But for now, your best option is to create a separate selector that taps into the class MT dynamically adds to elements (rather than having to add your own). The classes are as follows:

inView: .mt-inview
inView once: .mt-inview_once
click: .mt-click
mouseenter: .mt-mouseenter
JS Focus: .mt-js_focus

You can see these classes by inspecting elements using your browser dev tools. Or if you go to the custom code editor to the left of the Font property group (assuming you don’t have Sass support enabled – with Sass the code editor and GUI fields do not sync right now, but they will future).

So you could create a separate selector similar to the one MT generates e.g.

.some-selector.mt-mouseenter

That way you can use MT’s UI fields to add properties. Or, you can edit the custom code, manually inserting your custom properties (but again, only if you don’t have Sass support enabled).

Does that make sense?

Cheers,
Sebastian

P.S. You can create regular hover selectors via the UI . Just not the special parent-child one you’re after.

Also, there are two ways to create a custom selectors in MT.


widevisions September 25, 2019 at 11:14 am

Hi Sebastian, thanks really a lot.
I am overall a newbye also to WP and web design, so it will take some time to understand exactly what to do, but I guess you put me on the right way.
Imho, the custom selector is the way to go, thanks for your suggestion! Now I know where to check and with some attempts I am sure I will manage it.
Looking forward the new features then!
Kindest regards

Lorenzo

Sebastian September 25, 2019 at 11:21 am

You’re welcome Lorenzo. Let me know if you need further assistance 🙂

Cheers,
Sebastian

You must login or register to reply to this topic.