Report Blog Entry
okay bad explanation but are you tired of trying to hover/click on something and have it give a description, and then you look it up and it says the only way to do it are through js or another whack code?
well FEAR NOT! bc i have solved your problems with only FEW error points and it's only a little janky!
here's an example of the code (the background color didn't get removed but you get the point): https://files.catbox.moe/a9c0hs.mov
and here's the code:
CSS
#box{position:absolute;top:insertpx;left:insertpx;width:insertpx;height:insertpx;color:transparent;}
#box:hover{position:absolute;color:black;top:insertpx;left:insertpx;width:insertpx;}
HTML
<div id="box"><p>insert text that shows up here</p></div>
explanation of code:
CSS
#iwantdescription{background-color:rgba(0,0,255,0.5);position:absolute;top:insertpx;left:insertpx;width:insertpx;height:insertpx;color:transparent;}: this is the box that goes over the ORIGINAL thing you want a description for
the blue text is to show where the box goes. Change the "px" (or %, or em, or whatever) to where the original area is. You also change the width and the height to match where you need it to be.
the green text with black background is so that you know exactly where this box is going. Without it, you can't see the box, and you kind of need to do that in order for you to put it in the right place. Delete this code when you're done putting this box in the right place.
the red text is VERY important. I point it out because of the importance. This is the code that shows that the text you put in the HTML isn't shown until you hover over the area that this box goes over.
#box:hover{position:absolute;color:black;top:insertpx;left:insertpx;width:insertpx;height:insertpx;}: this is the code for when you hover over the box you already put down.
the blue text is where you would like the text to show up. It could be anywhere else. Anywhere your heart desires.
the green text with black background is pointed out for its importance. this shows that this code is taken on once the original box is hovered over.
the red text is also important. You can change it to whatever color you want, but make sure that it's an actual color, not transparent, or else the words will never show.
ALSO! you can decorate this box however you want. you can give it a border, a background color, whatever you want. it doesn't have to be limited to only text.
HTML
<div id="box"><p>insert text that shows up here</p></div>: this is the code for the text.
the blue text is where you just say what you want to say. no biggie. Don't worry about it showing up before you hover over it -- it wont.
if you want to put this in any of your projects or on your page use the following code:
<style>#box{position:absolute;top:insertpx;left:insertpx;width:insertpx;height:insertpx;color:transparent;}#box:hover{position:absolute;color:black;top:insertpx;left:insertpx;width:insertpx;}</style>
<div id="box"><p>insert text that shows up here</p></div>
and that's it! if you have any questions, please ask! have fun coding :)
Comments
Displaying 0 of 0 comments ( View all | Add Comment )