How to make a mouse over effect on New Topic Button
4 posters
Page 1 of 1
How to make a mouse over effect on New Topic Button
Hey, everyone!
I need help with creating a mouse over effect on the New Topic and Post Replay buttons.
I tried this site http://www.w3schools.com/css/css_image_sprites.asp but I couldn't write the code to show the buttons in my forum after I put it in my CSS.
I need help with creating a mouse over effect on the New Topic and Post Replay buttons.
I tried this site http://www.w3schools.com/css/css_image_sprites.asp but I couldn't write the code to show the buttons in my forum after I put it in my CSS.
Re: How to make a mouse over effect on New Topic Button
Hi! Can you provide your forum url?
Guest- Guest
Re: How to make a mouse over effect on New Topic Button
For New topic:
For post reply:
For New topic, for locked forum:
- Code:
#i_post:hover, #one:hover{
css proprietes;
}
For post reply:
- Code:
#i_reply:hover{
css proprietes;
}
For New topic, for locked forum:
- Code:
#i_reply_locked:hover{
css proprietes;
}
Guest- Guest
Re: How to make a mouse over effect on New Topic Button
I coulnd't make it work. It is possible for me to use two different images without hover them?
Re: How to make a mouse over effect on New Topic Button
Just remove :hover before the id's...
Guest- Guest
Re: How to make a mouse over effect on New Topic Button
I still can't get it to work. I'll post the code which I'm trying with.
There are no links in it now.
There are no links in it now.
- Code:
#i_post:hover, #one:hover{
{
width: 167px;
height: 76px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(link);
background-repeat: no-repeat;
}
a.y:hover {
width: 167px;
height: 76px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(link);
background-repeat: no-repeat;
}
Re: How to make a mouse over effect on New Topic Button
- Code:
#i_post:hover, #one:hover{
width: 167px;
height: 76px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(link);
background-repeat: no-repeat;
}
a.y:hover {
width: 167px;
height: 76px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(link);
background-repeat: no-repeat;
}
Guest- Guest
Re: How to make a mouse over effect on New Topic Button
Yes, I'll put the image links. I just removed them before I posted the code here.
Thank you.
Thank you.
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Re: How to make a mouse over effect on New Topic Button
No. Not yet.
So I put the last code and it still doesn't work.
And I put in the CSS section. What it is that I get wrong? The button just don't want to show up.
So I put the last code and it still doesn't work.
- Code:
#i_post:hover, #one:hover{
2. width: 129px;
3. height: 51px;
4. color: #000000;
5. padding: 10px;
6. text-decoration:none;
7. display: block;
8. font-weight: bold;
9. background-image : url(http://prikachi.com/images/385/4228385N.png);
10. background-repeat: no-repeat;
11. }
12.
13. a.y:hover {
14. width: 129px;
15. height: 58px;
16. color: #FFFFFF;
17. padding: 10px;
18. font-weight: bold;
19. text-decoration:none;
20. display: block;
21. background-image : url(http://prikachi.com/images/385/4228385N.png);
22. background-repeat: no-repeat;
}
And I put in the CSS section. What it is that I get wrong? The button just don't want to show up.
Re: How to make a mouse over effect on New Topic Button
Try this. Your codes should be separated you need the original code for the image and a hover code. First code should have the regular image and the hover code should have the hover image in the url(). This is how I did mine. not sure what the a.y:hover is for so I left it alone?
- Code:
#i_post, #one{
width: 129px;
height: 51px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(image);
background-repeat: no-repeat;
}
#i_post:hover, #one:hover{
width: 129px;
height: 51px;
color: #000000;
padding: 10px;
text-decoration:none;
display: block;
font-weight: bold;
background-image : url(hover image);
background-repeat: no-repeat;
}
a.y:hover {
width: 129px;
height: 58px;
color: #FFFFFF;
padding: 10px;
font-weight: bold;
text-decoration:none;
display: block;
background-image : url(hover image);
background-repeat: no-repeat;
}
Re: How to make a mouse over effect on New Topic Button
I finally did it, thank you very much.
It's solved!
It's solved!
Re: How to make a mouse over effect on New Topic Button
Topic Solved & Locked |
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Similar topics
» How can I make this effect?
» Hide new topic button inside a topic...
» help in this code . the effect on code > add button to Put under the colored writing
» Make this button red
» can some one make me this only 1 button? one!!!?
» Hide new topic button inside a topic...
» help in this code . the effect on code > add button to Put under the colored writing
» Make this button red
» can some one make me this only 1 button? one!!!?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum