Change border color on hover

Support
#1

Hi on my homepage I have a border around a column https://palilastudio.com
I want to make the border change color when I hover. How can this be obtained?

Thanks
Rena

#2

Hi There,

Thanks for writing in! Try adding the following Javascript code into your page’s custom Javascript section.

jQuery(".x-column").hover(
    // hover begin (mouse-in)
    function () {
        jQuery("#seo").css({"border-color": "#85c222"});
    },
    // hover end (mouse-out)
    function () {
        jQuery("#seo").css({"border-color": ""});
    }
);

Hope that helps.

#3

Thats awesome! Thank you! Would you mind just telling me how I could change the button border color on individual buttons. So if I had 3 on a page and wanted them all to have a different hover color.

I appreciate the help,
Rena

#4

Also, just one problem. I duplictated the code and chanaged the ID so that the box in column one and column 3 can have different hover colors. But when im hovering on the first column the 3 column changes too. Same thing if I hover on the 3rd column the 1st one changes. Is there a way to stop them from changing if Im not directly hovering on that column?

#5

Hi There,

Could you please try updating your code as follows.

jQuery(".x-column").hover(
    // hover begin (mouse-in)
    function () {
        jQuery("#seo").css({"border-color": "rgb(255, 196, 182)"});
        jQuery("#column3").css({"border-color": "rgb(198, 227, 220)"});
    },
    // hover end (mouse-out)
    function () {
        jQuery("#seo").css({"border-color": ""});
        jQuery("#column3").css({"border-color": ""});
    }
);

Hope that helps.

#6

Unfortunately its doing the same thing. I created a few boxes on the front page of my staging site: http://2e6.274.myftpupload.com You can see when you hover anywhere near them they both change color.

#7

Hello There,

Sorry if it did not work out for you.

Please remove the JS code first.

And then please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

#column1, #column2, #column3, #my-btn-1 {
    border-color: #000;
    overflow: hidden;
}

#column1:hover,
#my-btn-1:hover {
    border-color: rgb(255, 196, 182);
}

#column2:hover {
    border-color: rgb(16, 57, 241);
}

#column3:hover {
    border-color: rgb(227, 12, 12);
}

We would loved to know if this has work for you. Thank you.

#8

That did it! Thank you guys! I appreciate it :slight_smile:

#9

You’re welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.