Custom CSS not Changing Anchor Text Hover Color -ref - a:link {color:white;}

Hello,

I’m using the Sydney Theme to great effect but have a problem with a “List” I have created using an “Elementor” HTML widget on my website front page. Could I reach out to you and ask for help since I am very new to CSS CODE?

The list is ok apart from the Anchor Text which I want to initially be color “white” and then change to color “#fc46a7” on hover.

Presently the Anchor Text appears as color “#fc46a7” and no matter what CSS code I use on the widget it will not change.

I’ve tried a:link {color:white;} for the initial color but the color “#fc46a7” just won’t budge.

I should mention at this point that I have set the Sydney Theme “Prime” color to “#fc46a7” which is utilised throughout my site and for this reason I don’t want to change it. I am just wondering if it is this setting that is preventing me from changing the initial color on my list.

Presently, I’ve had to compromise and make the hover color “white” just to show an effect for now.

Here is a link to my webpage as it is right now for you to see if you have time - https://www.falmouthbayholidayapartments.co.uk/

The CSS code I’m using right now on the “List” HTML Widget is as follows -

h3{color: white;}

a:hover {
color: white;
}

h4{color: white;}

The HTML code that I’m using to create the “List” on HTML Widget is as follows -

Useful Links

    <li> <a href="/falmouth-self-catering-apartments-gyllyngvase/">Two Bedroom Apartment</a></li>
     
     <li> <a href="/disabled-friendly-holiday-apartments-in-falmouth-cornwall/">Disabled Friendly Apartments</a></li>
     
     <li> <a href="/access-statement/">Access Statement</a></li>
                        
    <li> <a href="/videos-falmouth-cornwall/">Apartment Videos</a></li>
            
    <li> <a href="/reviews/">Our Reviews</a></li>
                              
 <li> <a href="/late-availability-holiday-apartments-falmouth-cornwall/">Late Availability</a></li>
 </h4>
 </ul>

Any advice you could offer would be greatly appreciated.

Kind Regards

John Morgan

Hi,

It’s a very good thing to use Elementor as page builder, it’s offering a wide choice to create website pages.

I would recommend you to use the native elementor icon list widget instead of a home made html ul/li list through elementor html widget. The benefit of it, is the simplicity to format the list style without going into deep css coding…

Once you did insert your elementor list, check the 3 tabs in the widget properties. You’ll be able to custom styles as you feel and probably also more :wink:

Just to answer you about your initial request, you should first affect a css class into the ul html tag wich should look like :
<ul class="mylist">
<li><a></a></li>
</ul>

Then you could be able to modify css styles only for this list instead of all your page. It should look like :

.mylist a:link a:visited a:active{
color: white;
}
.mylist a:hover {
color: #fc46a7;
}
etc…

But I more than warmely recommend you to use the native elementor list widget. Once you’ll know it, you won’t look for other way, it’s so quick and easy :wink:

Hope that helps

BG

Bossanovation

Hello BG,

Thank you so much for helping!

I wasn’t aware of the Elementor List Widget, but I am now!

All done perfectly thanks to you.

Kind Regards

John

Hello,

Thank you once again for helping. As you suggested I’ve used the Elementor List Widget with success and as you said it is a lot easier than writing CSS code, especially for me since I have very little knowledge of CSS.

Even though, thanks to your help my problem is solved by using the Elementor List Widget I thought I would try using the CSS method you suggested as well, just so I could learn more.

I placed the CSS you suggested in the “Custom Settings” section at page level and then placed the “css class” into the ul html tag but for some reason it has not worked.

It may be that I have not understood your instructions and that I’ve not placed things correctly. If you get time could you have a look to see where I have gone wrong.

Here is the link to my “test” webpage containing the original list I created -

And here is my HTML code modified as I think you suggested -

Useful Links

  <ul class="mylist">
    <li> <a href="/self-catering-falmouth-castle-apartment/">One Bedroom Apartment Details</a></li>
                        
    <li> <a href="/falmouth-self-catering-apartments-gyllyngvase/">Two Bedroom Apartment Details</a></li>
                        
    <li> <a href="/reviews/">Our Reviews</a></li>
            
    <li> <a href="/self-catering-holiday-apartment-prices-in-falmouth-cornwall/">Apartment Prices</a></li>
                            
    <li> <a href="/disabled-friendly-holiday-apartments-in-falmouth-cornwall/">Disabled Friendly Apartments</a></li>
                            
    <li> <a href="/special-offers/">Special Offers</a></li>
                              
 <li> <a href="/late-availability-holiday-apartments-falmouth-cornwall/">Late Availability</a></li>
 </ul>

Kind Regards

John

Hello BG,

See attachment showing page settings CSS.

Regards

John Morgan

info@falmouthbayholidayapartments.co.uk