Solved

Way to have hovering effect

Posted on 2016-09-13

1 solution

Medium Priority

66 Views

Last Modified: 2016-09-14

Hi,
I want to have hovering effect (have deep color when mouse is on top of the Linkbutton). What to adjust below?

<body>
    <form id="main_form" runat="server">
    <div class="content" id="wrapper">
    <table width="100%">
        <tr>
            <td align="right" style="ForeColor:#0A2757;">
            <asp:LinkButton ID="lb_reg" 
                Text = "Register"
               CssClass="lb_reg"
               Font-Names="Times New Roman" 
               Font-Size="10pt" 
               OnClick="lb_reg_Click" 
               runat="server"/>
               &nbsp;|&nbsp; 
               <asp:LinkButton ID="lb_log" 
               Text = "Login"
               CssClass="lb_log"
               Forecolor="#0A2757"
               Font-Names="Times New Roman" 
               Font-Size="10pt" 
               OnClick="lb_log_Click" 
               runat="server"/>
               &nbsp;|&nbsp; 
               <asp:LinkButton ID="lb_supp" 
               Text = "Support"
               CssClass="lb_log"
               Forecolor="#0A2757"
               Font-Names="Times New Roman" 
               Font-Size="10pt" 
               OnClick="lb_supp_Click" 
               runat="server"/>
            </td>
        </tr>
        ...
            .lb_reg{
                color: black;
                top: 30px;
                left: 1075px;
                width: 36px;
                height: 30px;
                font-size: large;
                font-weight: bold;
                text-decoration: none;
            }  
            .lb_reg:hover{
                background-color: black !important;
                color: white !important;
            }  
            .lb_log{
            color:#000!important;
            top: 30px;
            left: 1130px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
            }

Open in new window

Comment

Question by:HuaMinChen

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 22

Expert Comment

by:Kim Walker

ID: 417972432016-09-13

I deleted my previous comment when I noticed you have three LinkButtons. The CSS code you have here should work for the first LinkButton. Does it not? Do you want the same effect on the other two LinkButtons?

LVL 11

Author Comment

by:HuaMinChen

ID: 417972592016-09-13

Yes, I do not see hovering effect to all 3 LinkButtons.

LVL 22

Accepted Solution

by:Kim Walker

Kim Walker earned 1500 total points

ID: 417972702016-09-13

Is it already working on the first LinkButton? If so, just add the other two classes to your style configuration. (See change on line 11 below.)

            .lb_reg{
                color: black;
                top: 30px;
                left: 1075px;
                width: 36px;
                height: 30px;
                font-size: large;
                font-weight: bold;
                text-decoration: none;
            }
            .lb_reg:hover, .lb_log:hover, .lb_supp:hover{
                background-color: black !important;
                color: white !important;
            }
            .lb_log{
            color:#000!important;
            top: 30px;
            left: 1130px;
            width: 36px;
            height: 30px;
            font-size:large;
            font-weight:bold;
            }

Open in new window

LVL 11

Author Comment

by:HuaMinChen

ID: 417972822016-09-13

Thanks a lot. BTW, what to adjust below, as ForeColor is underlined?

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Marketing 101 – The ABCs of a Homepage

Article by: Christian

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…

Web Development

The Ultimate Checklist to Optimize Your Website

Article by: Anush

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…