SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Help with a Hover effect

    Good afternoon Chaps and Chap-asses,

    I'm looking for some help to get a hover effect working. Basically, I want each "cell" in a table to display some information about the item in the cell when the end user hovers the mouse over the cell.

    I have tried the a:hover but I cant seem to get it working, does anyone have any suggestions?

    Here is what I have so far:

    HTML Code:
    <html>
    <head>
        <title>Sharp MX2600</title>
        <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    
    </head>
    
    
    <body>
    <h1>Sharp MX2600 Consumables</h1>
    <table class="table1">
        <thead>
            <tr>
                <th></th>
                <th scope="col" abbr="Toner">Toner(s)</th>
                <th scope="col" abbr="WTB">Waste Toner Bottle</th>
                <th scope="col" abbr="Drums">Drums</th>
                <th scope="col" abbr="Devs">Developer Units</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th scope="row"></th>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">Black</th>
                <td class="ktoner">SMX31GTBA</td>
                <td>SMX310HB</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <th scope="row">Cyan</th>
                <td>SMX31GTCA</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <th scope="row">Magenta</th>
                <td>SMX31GTMA</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <th scope="row">Yellow</th>
                <td>SMX31GTYA</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
            </tr>
            <tr>
                <th scope="row">Engineer Chip</th>
                <td>-</span></td>
                <td>-</span></td>
                <td>-</span></td>
                <td>-</span></td>
            </tr>
            <tr>
                <th scope="row">Customer Empty</th>
                <td>-</span></td>
                <td><span class="check"></span></td>
                <td>-</span></td>
                <td>-</span></td>
            </tr>
            <tr>
                <th scope="row">Engineer Empty</th>
                <td>-</span></td>
                <td><span class="check"></span></td>
                <td>-</span></td>
                <td>-</span></td>
            </tr>
            <tr>
                <th scope="row">Dropship</th>
                <td><span class="check1"></span></td>
                <td><span class="check1"></span></td>
                <td><span class="check1"></span></td>
                <td><span class="check1"></span></td>
            </tr>
        </tbody>
    </table>
    </div>
    </body>
    </html>
    Code:
    body {
    	background-color: ;
    }
    
    h1 {
    	text-align: center;
    	margin-top: 30px;
    	font: normal Georgia, "Times New Roman", Times, serif;
    	margin: 0 0 20px;
    	padding: 10px 0;
    	font-weight: normal;
    	text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
    	
    }
    
    table.table1{
        font-family: "Arial", sans-serif;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.4em;
        font-style: normal;
        border-collapse:separate;
        width:60%; 
        margin-left:20%; 
        margin-right:20%;
        margin-top: 5%;
    }
    
    .table1 thead th{
        padding:15px;
        color:#fff;
        text-shadow:1px 1px 1px #568F23;
        border:1px solid #93CE37;
        border-bottom:3px solid #9ED929;
        background-color:#9DD929;
        background:-webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.02, rgb(123,192,67)),
            color-stop(0.51, rgb(139,198,66)),
            color-stop(0.87, rgb(158,217,41))
            );
        background: -moz-linear-gradient(
            center bottom,
            rgb(123,192,67) 2%,
            rgb(139,198,66) 51%,
            rgb(158,217,41) 87%
            );
        -webkit-border-top-left-radius:5px;
        -webkit-border-top-right-radius:5px;
        -moz-border-radius:5px 5px 0px 0px;
        border-top-left-radius:5px;
        border-top-right-radius:5px;
    }
    
    .table1 thead th:empty{
        background:transparent;
        border:none;
    }
    
    .table1 tfoot td{
        color: #9CD009;
        font-size:32px;
        text-align:center;
        padding:10px 0px;
        text-shadow:1px 1px 1px #444;
    }
    .table1 tfoot th{
        color: #666;
    }
    
    .table1 tbody td{
        padding:10px;
        text-align:center;
        background-color:#DEF3CA;
        border: 2px solid #E7EFE0;
        -moz-border-radius:2px;
        -webkit-border-radius:2px;
        border-radius:2px;
        color:#666;
        text-shadow:1px 1px 1px #fff;
    
    }
    
    .table1 tbody th{
        color:#fff;
        text-shadow:1px 1px 1px #568F23;
        background-color:#9DD929;
        border:1px solid #93CE37;
        border-right:3px solid #9ED929;
        padding:0px 10px;
        background:-webkit-gradient(
            linear,
            left bottom,
            right top,
            color-stop(0.02, rgb(158,217,41)),
            color-stop(0.51, rgb(139,198,66)),
            color-stop(0.87, rgb(123,192,67))
            );
        background: -moz-linear-gradient(
            left bottom,
            rgb(158,217,41) 2%,
            rgb(139,198,66) 51%,
            rgb(123,192,67) 87%
            );
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-top-left-radius:5px;
        -webkit-border-bottom-left-radius:5px;
        border-top-left-radius:5px;
        border-bottom-left-radius:5px;
    }
    
    .table1 tbody span.check::before{
        content : url(images/check0.png)
    }
    
    .table1 tbody span.check1::before{
        content : url(images/check1.png)
    }
    Many thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you nest a span in the cell then you can show it when you hover the td.

    e.g.
    span{display:none;position:absolute;}
    td:hover span {display:block}

    Usually though its better to hide it offscreen then bring it back.

    span{position:absolute;left:-999em}
    td:hover span{left:auto}

    Unless you want some animation with css3 then you are better off making it zero width and height an then restore the height on hover.

    Here's a rough example using your code.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body { background-color:;
    }
    h1 {
    	text-align: center;
    	margin-top: 30px;
    	font: normal Georgia, "Times New Roman", Times, serif;
    	margin: 0 0 20px;
    	padding: 10px 0;
    	font-weight: normal;
    	text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
    }
    table.table1 {
    	font-family: "Arial", sans-serif;
    	font-size: 16px;
    	font-weight: bold;
    	line-height: 1.4em;
    	font-style: normal;
    	border-collapse:separate;
    	width:60%;
    	margin-left:20%;
    	margin-right:20%;
    	margin-top: 5%;
    }
    .table1 thead th {
    	padding:15px;
    	color:#fff;
    	text-shadow:1px 1px 1px #568F23;
    	border:1px solid #93CE37;
    	border-bottom:3px solid #9ED929;
    	background-color:#9DD929;
    	background:-webkit-gradient( linear, left bottom, left top, color-stop(0.02, rgb(123,192,67)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(158,217,41)) );
    	background: -moz-linear-gradient( center bottom, rgb(123,192,67) 2%, rgb(139,198,66) 51%, rgb(158,217,41) 87% );
    	-webkit-border-top-left-radius:5px;
    	-webkit-border-top-right-radius:5px;
    	-moz-border-radius:5px 5px 0px 0px;
    	border-top-left-radius:5px;
    	border-top-right-radius:5px;
    }
    .table1 thead th:empty {
    	background:transparent;
    	border:none;
    }
    .table1 tfoot td {
    	color: #9CD009;
    	font-size:32px;
    	text-align:center;
    	padding:10px 0px;
    	text-shadow:1px 1px 1px #444;
    }
    .table1 tfoot th { color: #666; }
    .table1 tbody td {
    	padding:10px;
    	text-align:center;
    	background-color:#DEF3CA;
    	border: 2px solid #E7EFE0;
    	-moz-border-radius:2px;
    	-webkit-border-radius:2px;
    	border-radius:2px;
    	color:#666;
    	text-shadow:1px 1px 1px #fff;
    }
    .table1 tbody th {
    	color:#fff;
    	text-shadow:1px 1px 1px #568F23;
    	background-color:#9DD929;
    	border:1px solid #93CE37;
    	border-right:3px solid #9ED929;
    	padding:0px 10px;
    	background:-webkit-gradient( linear, left bottom, right top, color-stop(0.02, rgb(158,217,41)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(123,192,67)) );
    	background: -moz-linear-gradient( left bottom, rgb(158,217,41) 2%, rgb(139,198,66) 51%, rgb(123,192,67) 87% );
    	-moz-border-radius:5px 0px 0px 5px;
    	-webkit-border-top-left-radius:5px;
    	-webkit-border-bottom-left-radius:5px;
    	border-top-left-radius:5px;
    	border-bottom-left-radius:5px;
    }
    .table1 tbody span.check::before { content : url(images/check0.png) }
    .table1 tbody span.check1::before { content : url(images/check1.png) }
    .tooltip {
    	position:absolute;
    	display:block;
    	width:0;
    	height:0;
    	padding:0;
    	overflow:hidden;
    	border:1px solid #000;
    	background:-webkit-gradient( linear, left bottom, right top, color-stop(0.02, rgb(158,217,41)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(123,192,67)) );
    	background: -moz-linear-gradient( left bottom, rgb(158,217,41) 2%, rgb(139,198,66) 51%, rgb(123,192,67) 87% );
     -webkit:border-radius:50%;
    	-moz-border-radius:50%;
    	border-radius:50%;
    	text-align:center;
    	margin:35px 0 0;
    	-moz-transition: all 1s; /* Firefox 4 */
    	-webkit-transition: all 1s; /* Safari and Chrome */
    	-o-transition: all 1s; /* Opera */
    	transition: all 1s;
    	opacity:0;
    }
    .table1 td:hover .tooltip {
    	opacity:1.0;
    	padding:20px;
    	width:100px;
    	height:50px;
    	overflow:visible;
    }
    .tooltip:before, .tooltip:after {
    	content:" ";
    	position:absolute;
    	top:-15px;
    	left:0;
    	width:20px;
    	height:20px;
    	margin-left:50px;
    	border:1px solid #000;
    	background:-webkit-gradient( linear, left bottom, right top, color-stop(0.02, rgb(158,217,41)), color-stop(0.51, rgb(139,198,66)), color-stop(0.87, rgb(123,192,67)) );
    	background: -moz-linear-gradient( left bottom, rgb(158,217,41) 2%, rgb(139,198,66) 51%, rgb(123,192,67) 87% );
     -webkit:border-radius:50%;
    	-moz-border-radius:50%;
    	border-radius:50%;
    }
    .tooltip:after {
    	top:-30px;
    	width:10px;
    	height:10px;
    }
    </style>
    </head>
    
    <body>
    <h1>Sharp MX2600 Consumables</h1>
    <table class="table1">
    		<thead>
    				<tr>
    						<th></th>
    						<th scope="col" abbr="Toner">Toner(s)</th>
    						<th scope="col" abbr="WTB">Waste Toner Bottle</th>
    						<th scope="col" abbr="Drums">Drums</th>
    						<th scope="col" abbr="Devs">Developer Units</th>
    				</tr>
    		</thead>
    		<tfoot>
    				<tr>
    						<th scope="row"></th>
    						<td></td>
    						<td></td>
    						<td></td>
    						<td></td>
    				</tr>
    		</tfoot>
    		<tbody>
    				<tr>
    						<th scope="row">Black</th>
    						<td class="ktoner">SMX31GTBA <span class="tooltip">This is the tooltip</span></td>
    						<td>SMX310HB<span class="tooltip">This is the tooltip</span></td>
    						<td>-</td>
    						<td>-</td>
    				</tr>
    				<tr>
    						<th scope="row">Cyan</th>
    						<td>SMX31GTCA<span class="tooltip">This is the tooltip</span></td>
    						<td>-</td>
    						<td>-</td>
    						<td>-</td>
    				</tr>
    				<tr>
    						<th scope="row">Magenta</th>
    						<td>SMX31GTMA<span class="tooltip">This is the tooltip</span></td>
    						<td>-</td>
    						<td>-</td>
    						<td>-</td>
    				</tr>
    				<tr>
    						<th scope="row">Yellow</th>
    						<td>SMX31GTYA<span class="tooltip">This is the tooltip</span></td>
    						<td>-</td>
    						<td>-</td>
    						<td>-</td>
    				</tr>
    				<tr>
    						<th scope="row">Engineer Chip</th>
    						<td>-</td>
    						<td>-</td>
    						<td>-</td>
    						<td>- </td>
    				</tr>
    				<tr>
    						<th scope="row">Customer Empty</th>
    						<td>-</span></td>
    						<td><span class="check"></span></td>
    						<td>-</span></td>
    						<td>-</span></td>
    				</tr>
    				<tr>
    						<th scope="row">Engineer Empty</th>
    						<td>-</span></td>
    						<td><span class="check"></span></td>
    						<td>-</span></td>
    						<td>-</span></td>
    				</tr>
    				<tr>
    						<th scope="row">Dropship</th>
    						<td><span class="check1"></span></td>
    						<td><span class="check1"></span></td>
    						<td><span class="check1"></span></td>
    						<td><span class="check1"></span></td>
    				</tr>
    		</tbody>
    </table>
    </div>
    </body>
    </html>

    This duplicate rules could be amalgamated to save a lot of code but I just kept it simple so you could see how it works more easily.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    56
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul, you are an absolute legend!

    Thanks you so much for that, its better than what I was hoping for!

    Cheers bud


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •