The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hover over Button

View previous topic View next topic Go down

Solved Hover over Button

Post by Eugeo Igvalt on January 3rd 2015, 9:19 pm

I'm asking this question because a friend of mine needs the answer to it. The Forum is PhpBB2.

The question is about the code for hovering over a button so that a member knows it's clickable.

Example: I take my cursor to something that's clickable and what I want to click on, darkens a bit or lightens a bit. I dunno if I explained myself right but there should be a code that allows this, right?


Last edited by Eugeo Ayano on January 4th 2015, 1:58 am; edited 1 time in total

Eugeo Igvalt
Forumember

Male Posts : 287
Reputation : 17
Language : EN, SPA
Location : Puerto Rico

http://www.NewbForums.com

Back to top Go down

Solved Re: Hover over Button

Post by Ange Tuteur on January 3rd 2015, 9:36 pm

Hello @Eugeo Ayano,

I think you're looking for the :hover pseudo-class. You add this to you current selector to change the display on hover.

For example we have a block and CSS :
Code:
<style type="text/css">.exempleA {
 background:red;
 width:50px;
 height:50px;
}</style>
<div class="exempleA"></div>

To change the color on hover we make a new ruleset, and add the :hover pseudo-class to our selector.
Code:
.exempleA:hover { background:blue }

To change the cursor, use the cursor property.
Code:
.exempleA:hover {
 background:blue;
 cursor:pointer;
}

To change the display when you're clicking an element, use the :active pseudo-class.
Code:
.exempleA:active { background:yellow }



Altogether :
Code:
<style type="text/css">.exempleA {
  background:red;
  width:50px;
  height:50px;
}
.exempleA:hover {
  background:blue;
  cursor:pointer;
}
.exempleA:active { background:yellow }</style>
<div class="exempleA"></div>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hover over Button

Post by Eugeo Igvalt on January 4th 2015, 1:57 am

Thank you very much for this help.
Marking solved.

Eugeo Igvalt
Forumember

Male Posts : 287
Reputation : 17
Language : EN, SPA
Location : Puerto Rico

http://www.NewbForums.com

Back to top Go down

Solved Re: Hover over Button

Post by Ange Tuteur on January 4th 2015, 2:21 am

You're welcome ^^

Topic archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum