How to change the font color for hover

  • Profile Image
    SpeedThesis
    Asked on June 16, 2020 at 10:43 AM

    2) how to change the font color for hover?

    It would be highly appreciated if you could please suggest CSS code for me.

    Thanks so much  :)

  • Profile Image
    IvayloK
    Answered on June 16, 2020 at 11:10 AM

    You can inject the following CSS code for the hover effect of the Submit button:

    .form-submit-button:hover {

    background: #FFFF00;

    color: #fff;

    border: 1px solid #eee;

    border-radius: 20px;

    box-shadow: 5px 5px 5px #eee;

    text-shadow:none;

    }

    Below is the CSS code for the hover effect of the Upload button:

    .qq-upload-button.qq-upload-button-hover {

        color : #00FF00 !important;

        background-color : #FF00FF !important;

        font-weight : bold !important;

    }

    Guide: How-to-Inject-Custom-CSS-Codes

    Please feel free to experiment with different values in the CSS code, which will allow you to achieve the desired result.

  • Profile Image
    SpeedThesis
    Answered on June 16, 2020 at 12:20 PM

    Hi IvayloK,

    I'm very grateful for your kind support.  :)

    The code for the hover effect of the Upload button works well.


    However, the code for the hover effect of the Submit button does not work.

    - The color of background and the font did not change.

    - The font size did not show on the Preview.

    - When I adjust the size of the Submit button, it seems to have an effect on the Upload button. They become not aligned at the center and I have no idea why this happens.

    Please find the images attached for your reference.

    Looking forward for your suggestions.

    Regards,


    ............

    Buttons on Advanced Designer

    1592324336Buttons in Adv Dsn.jpg


    ...........

    Buttons on Preview

    1592324363Buttons in Preview.jpg

  • Profile Image
    IvayloK
    Answered on June 16, 2020 at 02:00 PM

    Please allow me some time to further test the CSS code and prepare an example form.

    I will contact you later today.

  • Profile Image
    IvayloK
    Answered on June 16, 2020 at 04:09 PM

    I have fixed the CSS code. You can clone and test my form from here:

    https://form.jotform.com/201675708433962

    So, you can just clone it in your account and use it.

    Please note that if you adjust the size of the buttons from the Advanced Designer, it will affect all buttons.

    If you want to adjust the size of a particular button, I would recommend you to use CSS code. If you need, we can help you with this code.

    Let us know if you need any further assistance.

  • Profile Image
    SpeedThesis
    Answered on June 17, 2020 at 12:51 AM

    Hi IvayloK,

    Thanks so much for your kind support.

    I use the CSS code from the cloned form as you suggested, but the font color didn't change as it showed in the cloned from (I prefer the white font in both normal and hover effect).

    Please find the images attached for your reference.

    Looking forward for your further advice.  :)


    .............

    Cloned Form (I prefer this one)

    1592369436Submit Button.jpg

    .............

    Actual One

    1592369477Submit Button [Preview].jpg

  • Profile Image
    Sonnyfer
    Answered on June 17, 2020 at 04:24 AM

    Hi there - Kindly add the below CSS code your form:

    #input_88{

      color: white ! important;

    }

    Guide: How-to-Inject-Custom-CSS-Codes 

    Result:

    1592382210gsds.gif

    If you need further assistance, please let us know.

  • Profile Image
    SpeedThesis
    Answered on June 17, 2020 at 06:20 AM

    Hi Sonnyfer,

    The CSS code works so well!

    Thanks so much for your great support  :)