LayerSlider link text to change color when Hover

[VGonzaloMartinez]

WordPress: v4.8.4
Pro: v1.2.7
LayerSlider: v6.6.0
Slider Revolution: v5.4.6.3.1
http://mylink/home-test/

Hello,

I’m setting up a new LayerSlider.
I will have 5 slides.
A) Each will have a title H1 with a link to a specific internal page.
B) All will share a link “Commission your System” to my contact page.
C) Finally, all will have a clickable phone number, for smart phones.

I need the link text (on A and B) to change color when Hover, without following the default on the: Appearance/Customize/Typography/Site Links.

I also need control over the font color, as now it is following the default on: Appearance/Customize/Typography

Title font color: Black
Title hover color: Gray
Paragraph font color: Black
Paragraph hover color: Gray

[ruenel]

Hello There,

Thanks for posting in! To resolve your issue, please make sue of this code:

.ls-layers .ls-wrapper h1 {
    color: red !important;
    transition: color 2s ease;
}

.ls-layers .ls-wrapper:hover h1{
    color: blue !important;
}

.ls-layers .ls-wrapper a {
    color: green !important;
    transition: color 1s ease;
}

.ls-layers .ls-wrapper a:hover{
    color: yellow !important;
}

I have used a different color so that you will know the difference when it is taking effect. Please replace the color to the ones the suits your site design.

Regards.

[VGonzaloMartinez]

Thanks for the information,

Unfortunately the code did not work.
I place the code in the: LayerSlider/Slides/Styles

Also, I’m selecting the LayerSlider on the WP Page Slider Settings: “Below Masthead” (NOT Using Pro)

H1 LayerSlider/Slides/Styles Setting

TEXT Commission your System Setting:

HTML Commission your System Setting:

[basanta]

Hi There,
We are really sorry that the css didn’t work for you, Please add the bellow updated CSS and let us know the result.

.ls-layers .ls-wrapper h1 a:hover {
    color: red !important;
}

Please change the color as per your color. If that doesn’t work please send us your login details in a secure note, we will look on to the issue.

Thanks

[VGonzaloMartinez]

Thanks, but.

I add it to the beginning of existing code. And It did NOT work.
I add it to the bottom of existing code. And It did NOT work.
I replaced existing code it with the new code. And It did NOT work.

Non of this work.

[friech]

Hi There,

@VGonzaloMartinez

C) Finally, all will have a clickable phone number, for smart phones.

On this layer, please add a CLASS custom-link

Then add this on Theme Options > CSS (not on layer CSS)

.custom-link a {color: blue;}
.custom-link a:hover {color: cyan;}

@VGonzaloMartinez

I need the link text (on A and B) to change color when Hover, without following the default on the: Appearance/Customize/Typography/Site Links.

I spend some time to do this with custom CSS, but it’s a bit tricky because of how LayerSlider renders the h1 and its anchor layer on the front-end, you can change the color of h1 with the CSS but you can not really hover it because the anchor tag is covering it. You can not put the h1 tag on top of anchor (with z-index) either because that will make your anchor unclickable.

My advice on this is to add your h1 as HTML layer and apply a class and custom CSS to it (same method with clickable phone number layer).

Hope this helps,
Cheers!

[VGonzaloMartinez]

Hello,

Yes, now it changes color when Hover, but this makes the link unclickable.

Is there any Custom CSS code we can use in:
LayerSlider/Slides/Styles/Custom CSS

I really need this to work.

[friech]

Hi There,

This is not a correct HTML markup,

It should be:

<h1><a href="URL HERE">TEXT HERE</a></h1>

Then on your CSS code, that would be:

.custom-link h1 a {color: #fff;}
.custom-link h1 a:hover {color: black;}

That should work as your contact link does.

The Theme Options > CSS is called last, so if there is a CSS conflict between Theme Options versus LayerSlider CSS. The style of the Theme Options will be applied.

Thanks,