Hey all! I'm having a bit of an issue not being able to figure out a piece of code I'm trying to do. I don't even know if I'm using the right thing or not. Probably not. xD My knowledge on the subject is minimal.
Basically, I'm trying to make it so that when I hover over a page tab for my custom layout, the text enlarges on hover over, and shrinks back down once the mouse is no longer on it.
I would also like to have that text stay large (and a different color) when you are on a certain page. So if you're on the home page, it would be slightly larger (w/e size one decides to make it) and a different color from the other page tabs.
Likewise, when you changed to another page, that new page you're on would be large and a such, where the page you were formerly on is now back to normal.
I'm not sure what code to use for this exactly, nor where in the code I should put it! I know this is kind of vague, but could anyone help me out here? Greatly appreciated and thanks for reading.
Basically, I'm trying to make it so that when I hover over a page tab for my custom layout, the text enlarges on hover over, and shrinks back down once the mouse is no longer on it.
I would also like to have that text stay large (and a different color) when you are on a certain page. So if you're on the home page, it would be slightly larger (w/e size one decides to make it) and a different color from the other page tabs.
Likewise, when you changed to another page, that new page you're on would be large and a such, where the page you were formerly on is now back to normal.
I'm not sure what code to use for this exactly, nor where in the code I should put it! I know this is kind of vague, but could anyone help me out here? Greatly appreciated and thanks for reading.
Code:
ul#pagetabs li a:hover, .currentPage a {
font-size: 30px;
}
This code will change the font size of the hover page links at the top of each page, and the size of the page link that is currently being viewed! Is this what you were looking for? If you want these separate to style them individually just use this:
Code:
ul#pagetabs li a:hover {
font-size: 30px;
}
ul#pagetabs .currentPage a {
font-size: 30px;
color: #fff;
}
Apologies for the late reply! Thank you so much, Sanne. I'll give those a try as soon as I can. c:
Okay. SUPER late reply but I'm back to tinkering and those codes work perfectly. c: Now the only thing I need to figure out how to do is make it so they have a sort of... slow expansion into being larger, not just hovering over it and it pops into that larger size. I swear I used to have the code for how to do that before but nothing I'm trying seems to be working. I've been trying to find it online too but I guess I'm not using the right keywords.
Anyway, thank you Sanne, they work! c:
Anyway, thank you Sanne, they work! c:
You are on: Forums » Art & Creativity » Need CSS Help, Please!
Moderators: Mina, Keke, Cass, Claine, Sanne, Dragonfire, Ilmarinen, Darth_Angelus