0

My website:http://up8.431.myftpupload.com/

I recently changed the words under We Serve under the main image to links. After I did that, when I hovered over them they changed to the background color that they are in. I would like them to change to blue when I hover over them.

In the scrrenshot I have up the styling of the links but am hovered over the title, which happens to be an H2 tag. I used some custom css to get them to change to blue when I hover over them . Problem is, the whole page gets that same styling applied and it makes no sense to me. I put the custom css specifically just for that section of text.

Feel free to go to the page as well and see how everything on the page gets the same :hover effect applied. I suspect it's because I used just :hover with nothing before it so therefore it get's applied to everything.

Other things I've tried: 1. Using this:hover - did nothing 2. Using a:hover - made all links on the page have same hover effect 3. Giving that section of text a CSSID and class and applying styling thru the customizer Custom CSS/JS - did nothing... didn't even work

enter image description here

Any help would be appreciated. I think I understand what's going on. I just don't know how to fix it. Thx in advance

Improve this question

2 Answers 2

Reset to default
-1

Replace the style you added with the following.

.elementor-element-1fc9820 a:hover {
    color:blue !important;
}

You needed to be more specific with your rule. Since there is a elementor class around those links I just used that class.

Note: Your #3 solution should have worked so apparently you made a mistake when you attempted it.

Improve this answer
1
  • Thank you so much!! This worked perfectly. I see what you did there too:singled out the specific element and went more specific with the rules, as you were saying. Again, thank you so much
    – Vladimir Rosca
    Commented Jan 23, 2019 at 1:50
0

I actually don't think you should need to specify an added rule with something like ".elementor-element-1fc9820" to limit it to the very element you're editing (although it won't hurt, I guess).

The custom css that Elementor Pro is offering you to add when editing a certain element on the page should already be targeted at just that element (or a child element therein). It just doesn't make any sense otherwise, I'd say.

However, I think it's just the "a" before the colon that was missing so that actually anything – a, h2, h3, p, whatever –  within that element got highlighted when you hovered over it. The hover property is not restricted to just anchors/links as far as I know.

a:hover { color:blue !important; }

should do the trick without the ".elementor-element-1fc9820".

Improve this answer
2
  • CORRECTION: Sorry, but I was wrong! The Elementor Custom CSS – although added for just a specific element (say, a certain text editor in a certain section of the page) in the Elementor editor actually DOES cause ALL the elements with the chosen selector on the page to change accordingly! Makes no sense to me, but does so all the same...
    – gromek
    Commented Feb 13, 2020 at 12:29
  • (FULL) CORRECTION: Sorry, but I was wrong! The Elementor Custom CSS – although added for just a specific element (say, a certain text editor in a certain section of the page) in the Elementor editor actually DOES cause ALL the elements with the chosen selector on the page to change accordingly! WTF...? So adding a:hover { color:blue !important; } will affect ALL links on that page and not just the ones which happen to be in the very text editor you (think you) are styling. You can, however, apply a custom class to the element you're actually going for to limit the impact...
    – gromek
    Commented Feb 13, 2020 at 12:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.