Random color mouseover

banana

Hi,

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

Thanks!
Ana

Richard

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

Lay Theme Forum

Random color mouseover

Before you post:

Online Users