Please Read: Hover Boxes

Worker Joined: Nov 09, 2012 Posts: 127

How do I get these hover boxes. I made a video demonstrating it on my site, and then another site (TTG), I was able to replicate it, and I can provide my style.css, but can someone please tell me what part of my css is causing this? I know that this happens in the fisubice theme, as well. Which part of my css is creating this effect? because I would like to use the feature in a different theme, but not carry over any other part of the css, just the hover box part.

Thanks

Only registered users can see links on this board! Get registered or login!

And here is my style.css
Only registered users can see links on this board! Get registered or login!

registered · Posted: Wed Jan 09, 2013 6:30 pm

Just use the input part of the css. It would look something like this:

Code:




input {


border-radius: 4px;


}


input:hover {


   border:#d9d9d9 1px solid;border-top-color:#a0a0a0;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);


 }

registered · Site Admin Joined: Aug 22, 2007 Posts: 1775

Edit: nuken was faster Smile

http://www.w3schools.com/css/css_pseudo_classes.asp

Regular Joined: Jan 18, 2011 Posts: 86

I would like to point out though that if you only intend it to be for input fields, you might have to change a certain bit in the .css files.

If you take real good notice, the hovering effect you're after also displays on the italic text box (see 0:43 - 0:44). In the video you see a moment where you slightly hover over the italic text selection box and it displays the same effect.

Again, if it's only for the input fields, make sure you edit the css files to only have it displayed for input fields. If you want it to be active on the whole editor (buttons and whatnot) aswell. Leave .css as is

Posted: Thu Jan 10, 2013 6:11 pm

nuken wrote:

Just use the input part of the css. It would look something like this:

Code:




input {


border-radius: 4px;


}


input:hover {


   border:#d9d9d9 1px solid;border-top-color:#a0a0a0;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);


 }

Thanks, that worked, but how do I get the cursor to change to a hand as seen in the video?

Posted: Thu Jan 10, 2013 6:19 pm

http://www.w3schools.com/cssref/pr_class_cursor.asp

Posted: Thu Jan 10, 2013 6:19 pm

Code:

cursor: hand; cursor: pointer;

Posted: Thu Jan 10, 2013 7:41 pm

Guardian2003 wrote:

Code:

cursor: hand; cursor: pointer;

Yes, but how would I implement this with the css code for the hover boxes? I would like the the cursor to turn into a hand while hovering over the boxes, while using that css to make the box have 'shadows' as well...

Posted: Thu Jan 10, 2013 7:58 pm

This is basic stuff with thousands of example on the internet. Just add

Code:




cursor: pointer;

to the input:hover. It would look like this:

Code:




input:hover {


  cursor: pointer; border:#d9d9d9 1px solid; border-top-color:#a0a0a0; -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.1);


 }

Posted: Fri Jan 11, 2013 7:09 am

Ok thanks