7 {{ upvoteCount | shortNum }}
7 {{ upvoteCount | shortNum }}

Please Help Me Styling HTML Quiz!!

by Ricky Dawn
6 replies
Hey!

I am making a Quiz but I am stuck with something and it is really really annoying me.

I want to make it so when someone hovers over a answer it will highlight like on this quiz:

Are You in Love Quiz

Please help me with this at the moment I only have labels for each one and I can change the background color on the label but it only goes over the text + I cannot make it change color on hover.

Please can you help me?

Thanks!!
#html #quiz #styling
  • Profile picture of the author Ricky Dawn
    Come on guys! Does anyone know please?

    This is really annoying me

    Ricky
    {{ DiscussionBoard.errors[4980293].message }}
    • Profile picture of the author Speedyapoc
      You can use the CSS event :hover to change the background color of that class when the user hovers their mouse over it.
      {{ DiscussionBoard.errors[4980586].message }}
  • Profile picture of the author Nail Yener
    I can't give a certain answer without seeing your code but you should use something like the following code for the class you are using for the answers:

    Code:
    li.hover {
background: #e00000;
color: #fff
}
    You can inspect such styles with Google Chrome browser. Right click on any element of a web page and select Inspect Element, it will display its HTML and CSS code.
    {{ DiscussionBoard.errors[4982767].message }}
  • Profile picture of the author Jack Samurai
    li.hover {
    color:#000;
    background: #e00000;
    }

    Try this.
    {{ DiscussionBoard.errors[5012208].message }}
  • Profile picture of the author wasabi20
    li:hover here....

    why li.hover ?

    a DOT are for CLASS !

    So:

    <li class='hover'> will be represented by li.hover

    For HOVER here,

    we need to user: li:hover

    In the demo, the guy were using javascript to add class on hover
    {{ DiscussionBoard.errors[5023242].message }}
  • Profile picture of the author wasabi20
    duplicate post sorry

    have a nice day
    {{ DiscussionBoard.errors[5023248].message }}

Trending Topics