?
Solved

Hovering effect

Posted on 2016-11-11
9
Medium Priority
?
63 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
[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
  • 4
  • 4
9 Comments
 
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 1000 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 11

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
Get MongoDB database support online, now!

At Percona’s web store you can order your MongoDB database support needs in minutes. No hassles, no fuss, just pick and click. Pay online with a credit card. Handle your MongoDB database support now!

 
LVL 82

Expert Comment

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

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 1000 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 11

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 11

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 1000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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?
Ready to get certified? Check out some courses that help you prepare for third-party exams.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

765 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