This is a public Forum  publicRSS

Topic

    SophO
    Hover function on the Guided Assistant Question Button?Answered
    Topic posted April 20, 2017 by SophORookie, last edited April 20, 2017 
    33 Views, 3 Comments
    Title:
    Hover function on the Guided Assistant Question Button?
    Content:

    Hi everyone, I've searched the whole site for help with this question but can't seem to get it working.  Following this link, I was able to customise the Question Buttons for Guided Assistance (code below).  However, we have feedback that it is not immediately obvious that you need to select a "button" to proceed through the guide so I wanted to add a hover function that changed the colour of the button when the mouse hovers over.

    I am unsure where in this code I am supposed to place the :hover property.  I've tried using this code:

    
    .rn_GuidedAssistant .rn_ButtonQuestion:hover {
        background-color: #be15c4;
    }
    

    Which only resulted in the whole element being highlighted whereas I need it for the individual buttons (see attached pic). I've tried multiple ways of adding this but have not succeeded yet. I am a complete beginner regarding CSS/web developing so am sorry if this is something easy I am missing!frown

    Thanks in advance! smiley

    Version:
    CP Framework version 2.0
    Code Block:

    Best Answer

    Barrilito

    Hi SophO,

    It is a little bit difficult to tell what to do if you are new to css and web development. We are happy to help out anyone and with any skill, but please be aware that the community is meant for OSC related questions. You do need some basic skills to start with, and your question in that respect is more general then osc related. In your case when you want to change some styling on a customer portal page you should at least have some developing skills on several areas. But lets give it a try anyway to get you a step further.

    I don't know how your code from the page looks like, but you gave an example of styling that lighted up the entire element container:

    .rn_GuidedAssistant .rn_ButtonQuestion:hover 
    

    So that means you should dive in one step deeper as the buttons are within that element. Try to use a developers tool in Firefox or IE to look underwater in the page on the element. In many browsers hitting F12 gets you to such a tool if it is already build in. If you then select your button you can see the html code of it and you know (if you have some css knowledge/skills) what to do.

    In your case you want to do something with the buttons, so select the button within the section. In css that would become:

    .rn_GuidedAssistant .rn_ButtonQuestion button:hover {
        background-color:#fff;
        border:1px solid #000;
    }

    What this css says is:

    Select the buttons within an element with the class "rn_ButtonQuestion" that is within an element with a class "rn_GuidedAssistant" and if you hover over it, set the background to white "#fff" and the color to black "#000".

    Works, makes sense?

    Regards

    Answer

     

    • Barrilito

      Hi SophO,

      It is a little bit difficult to tell what to do if you are new to css and web development. We are happy to help out anyone and with any skill, but please be aware that the community is meant for OSC related questions. You do need some basic skills to start with, and your question in that respect is more general then osc related. In your case when you want to change some styling on a customer portal page you should at least have some developing skills on several areas. But lets give it a try anyway to get you a step further.

      I don't know how your code from the page looks like, but you gave an example of styling that lighted up the entire element container:

      .rn_GuidedAssistant .rn_ButtonQuestion:hover 
      

      So that means you should dive in one step deeper as the buttons are within that element. Try to use a developers tool in Firefox or IE to look underwater in the page on the element. In many browsers hitting F12 gets you to such a tool if it is already build in. If you then select your button you can see the html code of it and you know (if you have some css knowledge/skills) what to do.

      In your case you want to do something with the buttons, so select the button within the section. In css that would become:

      .rn_GuidedAssistant .rn_ButtonQuestion button:hover {
          background-color:#fff;
          border:1px solid #000;
      }

      What this css says is:

      Select the buttons within an element with the class "rn_ButtonQuestion" that is within an element with a class "rn_GuidedAssistant" and if you hover over it, set the background to white "#fff" and the color to black "#000".

      Works, makes sense?

      Regards

    • SophO

      Thanks Barrilito for taking the time to reply. I have a very basic understanding, though it is mostly self-taught, and sometimes simple things seem to be the most complicated. This worked fantastically along with your helpful explanation. Really appreciated.

    • Barrilito

      Hi SophO,

      No problem, like I said we all have been a beginner at something at a time, so I fully understand.

      Good to hear it worked! Thank you for the feedback.

      Have a good weekend!

      Regards.