Solved

Hovering effect

Posted on 2016-11-11
9
57 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 56

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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
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 is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

749 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