How to make a mouse over effect on New Topic Button Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    How to make a mouse over effect on New Topic Button

    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 17:14

    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.

    avatar
    Guest
    Guest


    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Guest Wed 4 Jan - 17:17

    Hi! Can you provide your forum url? Smile
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 17:19

    That's the forum

    But is still under construction
    avatar
    Guest
    Guest


    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Guest Wed 4 Jan - 17:27

    For New topic:
    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;
    }
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 17:32

    Thanks, I'll try it
    avatar
    Guest
    Guest


    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Guest Wed 4 Jan - 17:33

    Welcome! Very Happy
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 17:37

    I coulnd't make it work. It is possible for me to use two different images without hover them?
    avatar
    Guest
    Guest


    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Guest Wed 4 Jan - 18:26

    Just remove :hover before the id's... Smile
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 18:54

    Oh, yeah. Thank you very much Razz


    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 19:04

    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.

    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;
    }
    avatar
    Guest
    Guest


    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Guest Wed 4 Jan - 19:51

    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;
    }
    You have an mistake, also replace background-image : url(link) by a link to a image. Very Happy
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Wed 4 Jan - 20:12

    Yes, I'll put the image links. I just removed them before I posted the code here.
    Thank you.
    avatar
    Guest
    Guest


    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Guest Thu 5 Jan - 8:30

    Glad I could help. Smile
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sanket Thu 5 Jan - 8:57

    SolveD?
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Thu 5 Jan - 17:19

    No. Not yet.

    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.
    avatar
    iamthestreets
    Forumember


    Posts : 114
    Reputation : 1
    Language : English

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by iamthestreets Thu 5 Jan - 20:21

    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;
    }
    Sweet_Nightmare
    Sweet_Nightmare
    Forumember


    Female Posts : 84
    Reputation : 4
    Language : Bulgarian
    Location : Sofia, Bulgaria

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Sweet_Nightmare Thu 5 Jan - 21:54

    I finally did it, thank you very much.
    It's solved! Smile
    Nera.
    Nera.
    Energetic


    Female Posts : 7078
    Reputation : 2017
    Language : English
    Location : -

    Solved Re: How to make a mouse over effect on New Topic Button

    Post by Nera. Thu 5 Jan - 22:38

    Topic Solved & Locked