Solved

Hovering effect

Posted on 2016-11-11
9
55 Views
Last Modified: 2016-11-13
Hi,
I cannot show hovering effect (to show black color on Link buttons, once the mouse is hovering on top of them). But I cannot achieve that by these. Why?
            <td align="right" style="ForeColor:#0A2757;">
                <asp:LinkButton ID="lb_bck" 
                   Text = "前页"
                   CssClass="lb_bck"
                   Font-Names="Times New Roman" 
                   OnClick="lb_bck_Click"
                   runat="server"/>
                   &nbsp;|&nbsp; 
                <asp:LinkButton ID="lb_exit" 
                   Text = "离开"
                   CssClass="lb_exit"
                   Font-Names="Times New Roman" 
                   OnClientClick="window.close()" 
                   runat="server"/>
            </td>
            ...
            .lb_bck{
                color: black;
                top: 30px;
                left: 1075px;
                width: 36px;
                height: 30px;
                font-size: large;
                font-weight: bold;
                text-decoration: none;
            }  
            .lb_bck:hover, .lb_exit:hover{
                background-color: black !important;
                color: white !important;
            }
            .lb_exit{
                color: black;
                top: 30px;
                left: 1185px;
                width: 36px;
                height: 30px;
                font-size:large;
                font-weight: bold;
                text-decoration: none;
            }    
            ...

Open in new window

0
Comment
Question by:HuaMinChen
  • 4
  • 4
9 Comments
 
LVL 55

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 41883526
Based on the code you posted it works

Working sample here

Something else must be causing it not to work.

Do you have a link?

Have you right clicked the element and viewed in Console to see what styles are being applied?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41883651
could you put your css at the end of your page or at least at the end in your head section, I mean, after any other other stylesheet.
you may have another stylesheet overwriting your styles
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41884664
Many thanks all.
Julian,
It is running within the Intranet now.

I right-click the Link button and can only see this

9u.pngLeakim,
Here is the whole Head part
<head id="Head1" runat="server">
	<title>楼盘资料</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="JavaScript1.js">
    </script>

Open in new window

Here is css file
        .body {background-color:#1BA8E0;} 
            .lb_bck{
                color: black;
                top: 30px;
                left: 1075px;
                width: 36px;
                height: 30px;
                font-size: large;
                font-weight: bold;
                text-decoration: none;
            }  
            .lb_bck:hover, .lb_exit:hover{
                background-color: black !important;
                color: white !important;
            }
            .lb_exit{
                color: black;
                top: 30px;
                left: 1185px;
                width: 36px;
                height: 30px;
                font-size:large;
                font-weight: bold;
                text-decoration: none;
            }    
        .left {
            position:absolute;
            left:10px;
            border:Groove 1px #ccc;
            width:55px;
            right:10px;
        }

         .right {
             position:absolute;
             left:330px;
             border:none 1px #c00;
             width:61%;
        }

        .up {
            top: 20px;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 250px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
         }
         ul.imagesList li img {
             width: 99%;
             height: 125px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 2px 2px 2px 2px;
         }
		 ul.imagesList li:hover input {
			display: block !important;
            margin: 1px 1px 1px 1px;
		 }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
            display:none;
        }
        input[type="text"], input.user-text
        {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }
          input[type="textbox"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }
          input[type="button"], button
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }
          input[type="password"]
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }
          .forbutton
          {
            -moz-border-radius: 8px;
             border-radius: 10px;
              border:solid 1px gray;
              padding:7px;
          }
          select
          {
            -moz-border-radius: 7px;
             border-radius: 7px;
              border:solid 1px gray;
              padding:7px;
          }

Open in new window

How can I know which is now being overridden?
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 82

Expert Comment

by:leakim971
ID: 41884671
put line 3 after line 4 to do a test
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41884679
Thanks.
I put these
<head id="Head1" runat="server">
	<title>楼盘资料</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="JavaScript1.js">
    </script>

Open in new window

and still get the same appearance to Link buttons.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 41884688
it's going to be weird but if you remove the line 3, for testing purpose, do it work ?
I mean, remove this line :
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

Open in new window


are you sure you don't have any other stylesheet inside the BODY of the page?... I ask just to be sure
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41884705
I will further confirm if it is fine WITHOUT that line. Thanks a lot.

Yes, there is no other Style sheet to the whole page.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 41885365
Leakim,
I remove the line but there is still NO improvement got!
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 41885376
clear your cache.
if nothing better, remove ALSO (dont put back the previous one) the following line for testing purpose :
<script type="text/javascript" src="JavaScript1.js">
don't forget to clear your cache twice
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question