Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Random color mouseover

    General Discussion
    2
    2
    139
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      banana last edited by

      Hi,

      is it possible to create a random color of text on mouse hover?

      Thanks!
      Ana

      1 Reply Last reply Reply Quote 0
      • Richard
        Richard Global Moderator last edited by

        Dear Ana @banana

        It is possible :)

        This will require some basic knowledge of Javascript/jQuery:

        https://laytheme.com/documentation.html#custom-javascript

        Which you would be adding into the Custom <head> content within "Lay Option - Custom CSS & HTML" :

        Screen Shot 2020-09-14 at 2.51.54 PM.png

        Add the following code and it will target all the Links on your page <a> on hover they will be a random colour:

        <script>
        window.laytheme.on("newpageshown", function(layoutObj, type, obj){
            
            var origColor = jQuery("a").css("color");
            
            jQuery( "a" ).mouseover(function() {
            jQuery(this).css("color",getRandomColor());
            });
            
            jQuery( "a" ).mouseout(function() {
            jQuery(this).css("color", origColor);
            });
            
            function getRandomColor () {
             var letters = '0123456789ABCDEF'.split('');
             var color = '#';
             for (var i = 0; i < 6; i++) {
                 color += letters[Math.floor(Math.random() * 16)];
             }
             return color;
                }
        });
        
        </script>
        

        In this Code there are 3

        jQuery( "a" )
        

        You can change the 'a' to target what text you wish within your webpage. To do so we can use the Google Inspect tool:

        https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

        Right click on the element you wish to be a random colour and choose 'inspect'.

        Screen Shot 2020-10-27 at 11.14.07 AM.png

        This will bring up a list of attributes associated with the element, for example here this menu text i have:

        Screen Shot 2020-10-27 at 7.42.01 PM.png

        it has a class called:

        .menu-item-67
        

        I could change the

        jQuery( "a" )
        

        to:

        jQuery( ".menu-item-67" )
        

        And now this particular menu item would be a random colour on hover.

        I hope this helps you Ana and have a wonderful day, thank you for using Lay Theme and Good Luck! :)

        Best
        Richard

        1 Reply Last reply Reply Quote 0
        • First post
          Last post

        Try this to fix issues before you post:

        Use the Search Feature. Maybe there is already a solution to your issue.

        1. Update Lay Theme and all Lay Theme Addons
        2. Disable all Plugins
        3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
        4. Now see if your problem solved itself
        5. Go here, see if your problem is listed here:
        Troubleshooting

        When you post:
        1. Post a link to where the problem is
        2. If the problem is difficult to explain, post screenshots / link to a video to explain it

        Thanks!

        Online Users

        S
        G
        T
        L
        M

        Recent Topics

        • Carousel is not showing

        • S

          Image hover -> Image on image

        • C

          centred Carousel fixed width and proportions

        • text underline

        laytheme.com