Table Rollovers

fun with hover

by individual11

HTML

<div class="panel">
    <div class="innerPanel">
        <div class="panelHeader">Header of list</div>
        <ul>
            <li>
                <div class="name">Test account 1</div>
                <div class="controls"><a href="#">edit</a> <a href="#" class="delete">delete</a></div>
            </li>
            <li>
                <div class="name">Test account 2</div>
                <div class="controls"><a href="#">edit</a> <a href="#" class="delete">delete</a></div>
            </li>
            <li>
                <div class="name">Test account 3</div>
                <div class="controls"><a href="#">edit</a> <a href="#" class="delete">delete</a></div>
            </li>
            <li>
                <div class="name">Test account 4</div>
                <div class="controls"><a href="#">edit</a> <a href="#" class="delete">delete</a></div>
            </li>
            <li>
                <div class="name">Test account 5</div>
                <div class="controls"><a href="#">edit</a> <a href="#" class="delete">delete</a></div>
            </li>
            <li>
                <div class="name">Test account 6</div>
                <div class="controls"><a href="#">edit</a> <a href="#" class="delete">delete</a></div>
            </li>
        </ul>
    </div>
</div>

CSS

body{
    color:#eee;/*#abdb6c;*/
    background-color: #323232;
    font-family:"Helvetica", Arial, sans;
    font-size: 12px;
}

a{
    text-decoration:none;
    color:#abdb6c;
}
a:hover{
    text-decoration:underline;   
}

.panel{
    width:400px;
    background-color:#2e2e2e;
    padding:4px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 2px #222222;
    -moz-box-shadow: 1px 1px 2px #222222;
    box-shadow: 1px 1px 2px #222222;
}
.innerPanel{
    background-color:#3c3c3c;
    padding:2px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 2px #222222;
    -moz-box-shadow: 1px 1px 2px #222222;
    box-shadow: 1px 1px 2px #222222;
}
.panelHeader{
    color:#323232;
    background-color:#abdb6c;
    padding: 4px 0px 4px 3px;
    font-size: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    /*background-image: -webkit-gradient(linear, left top, left bottom,
        color-stop(0, #bfdb9a),
        color-stop(0.5, #bfdb9a),
        color-stop(0.5, #abdb6c),
        color-stop(1, #abdb6c));*/
}
.controls{
    display:none;
    float:right;  
}

li{
    padding:3px; 
}
li:nth-child(odd){
}
li:nth-child(even){
    background-color:#373737;
}
li:hover{
    background-color:#444;   
}
.name{
    display:inline; 
}

JavaScript

$('li').hover(

function(e) {
    $(this).children(".controls").delay(300).fadeIn("fast");
}, function(e) {
    $(this).children(".controls").clearQueue();
    $(this).children(".controls").stop().fadeOut(function(e) {
        $(this).css('opacity', 1.0); //fixes a bug with opacity and clearQueue
    });
});

$('li .delete').click(function(e) {
    $(this).parent().parent().slideUp(function(e) {
        $(this).remove();
    });
});