How can I have different colors for hover states every time I scroll over it?-CodePudding

I'm not a coder but I want to add multiple colors to hover states. So for example, someone will hover over a link, and let's say the color will start off at #0c7740. When they hover over the same link it'll change to #ff4b00 and so forth. Now I want this applied to every link on my website, so it'll be universal.

The array of colors I want on the hover state are: #0c7740, #ff4b00, #2351fc, #5741d1, #c7c41c. (Would it be easy to switch these colors out when I want to change them?)

My website is on cargo collective and they use the below CSS code. I briefly looked up how to add javascript to the code and it says I would need to add a script tag to the HTML but I'm not entirely sure.

[data-predefined-style="true"] bodycopy a {
color: rgba(0, 0, 0, 0.85);
text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {
color: rgba(0, 0, 0, 0.85);
}

CodePudding user response：

To do this you'll need to add some Javascript. This needs to go to between the script tags.

EDITED: now no need to add any stylesheet rules, javascript does it for you :-)

<script>
  colorArray = ['#0c7740', '#ff4b00', '#2351fc', '#5741d1', '#c7c41c'];
  colorIndex = 0;

  function setColorAndIncrement() {
    document.querySelector('body').setAttribute('style', '--hoverColor:'   colorArray[colorIndex]);
    colorIndex = (colorIndex   1) % colorArray.length;
  }

  window.onload = (event) => {
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet.insertRule("a:hover { color:var(--hoverColor);}");

    setColorAndIncrement();
    const anchorElements = document.querySelectorAll("a");
    anchorElements.forEach((anchorElement) => {
      anchorElement.addEventListener('mouseover', (event) => {
        setColorAndIncrement();
      });
    });
  };
</script>

Demo here

colorArray = ['#0c7740', '#ff4b00', '#2351fc', '#5741d1', '#c7c41c'];
  colorIndex = 0;

  function setColorAndIncrement() {
    document.querySelector('body').setAttribute('style', '--hoverColor:'   colorArray[colorIndex]);
    colorIndex = (colorIndex   1) % colorArray.length;
  }

  window.onload = (event) => {
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.sheet.insertRule("a:hover { color:var(--hoverColor);}");

    setColorAndIncrement();
    const anchorElements = document.querySelectorAll("a");
    anchorElements.forEach((anchorElement) => {
      anchorElement.addEventListener('mouseover', (event) => {
        setColorAndIncrement();
      });
    });
  };

<a href='one'>Link 1</a><br>
<a href='one'>Link 2</a><br>
<a href='one'>Link 3</a>

CodePudding user response：

EDITED: this is simpler than the one above

the only way to do such a thing is to use javascript! Don't be scared though, it's easier than you think. first you need to translate your current code in js. With an "addEventListener" you can create the "hover":

element.addEventListener("mouseover", elementHover);

Element is a variable initialized as follows:

var element = document.querySelectorAll("bodycopy a");

ElementHover is a function, like "container" of all the code that need to be executed when you hover the element and initializes as follows:

function elementHover(){
   // this is a comment
   // first you need to create a "box" containing all the color option (it's called an array)
   var colorArray = ["#2B45AE","#2B4A3E","#4C1A13"]; // as many as you want
   // now create color variable that changes randomly every time
   var randomColorNumber = Math.floor(Math.random() * colorArray.length); // colorArray.length is the number of color in colorArray 
   // now you just need to get the color!
   var randomColor = colorArray[randomColorNumber];
   // and just assign it
   element.style.color = randomColor;
}

Now if you hover the a it change but if you remove the mouse from it the color dont change, you have to tell javascript what to do when you remove the mouse from there

element.addEventListener("mouseout", elementDefault);

function elementDefault(){
    element.style.color = "#cc7a76"; // thise value is the default color
}

Now you have just to connect javascript to html, put the javascript file in the same folder as the .html file, than put this in the bottom of the html body

<script src="javascriptFileName.js"></script>

Html at the end should look like this:

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <bodycopy>
        <a>Your text</a>
    </bodycopy>
    <script src="javascriptFileName.js"></script>
</body>
</html>

Javascript at the end should look like this:

// define element
var element = document.querySelectorAll("bodycopy a");

// event listeners
element.addEventListener("mouseover", elementHover);
element.addEventListener("mouseout", elementDefault);

// functions
function elementHover(){
    // this is a comment
    // first you need to create a "box" containing all the color option (it's called an array)
    var colorArray = ["#2B45AE","#2B4A3E","#4C1A13"]; // as many as you want
    // now create color variable that changes randomly every time
    var randomColorNumber = Math.floor(Math.random() * colorArray.length); // colorArray.length is the number of color in colorArray 
    // now you just need to get the color!
    var randomColor = colorArray[randomColorNumber];
    // and just assign it
    element.style.color = randomColor;
}


function elementDefault(){
    element.style.color = "#cc7a76"; // thise value is the default color
}

This works on my pc and shoud be should be enough for you but I'm here for problems or clarifications