Solved

Hovering effect

Posted on 2016-11-11
9
30 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 51

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
 
LVL 82

Expert Comment

by:leakim971
ID: 41884671
put line 3 after line 4 to do a test
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Read about why website design really matters in today's demanding market.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now