Question

我正在使用jquery在悬停时显示列表，但是当我这样做时，列表隐藏在显示日期下面的图像后面。建议PLZ

<style type="text/css">    
.calendar_date                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 15px; color : #222222; }
a.calendar_date                    { color: #0000aa; text-decoration: none; }
a.calendar_date:hover            { color: #000080; text-decoration: underline; }

//.calendar_navigation            { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 14px; color : #222222; }
//a.calendar_navigation            { color: #0000aa; text-decoration: none; }
//a.calendar_navigation:hover        { color: #000080; text-decoration: underline; }


.calendar_day                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #222222; }
a.calendar_day                    { color: #0000aa; text-decoration: none; }
a.calendar_day:hover            { color: #000080; text-decoration: underline; }

.calendar_date_number            { font-family : Cursive,menu, Arial, Helvetica, sans-serif,solid,bold; float:left; margin-left : 10px; color : #222222; }
a.calendar_date_number            { color: #0000aa; text-decoration: none; }
a.calendar_date_number:hover    { color: #000080; text-decoration: underline; }

.calendar_date_small                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #222222;  }
a.calendar_date_small                    { color: #0000aa; text-decoration: none; }
a.calendar_date_small:hover            { color: #000080; text-decoration: underline; }

.calendar_navigation_small            { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #222222; }
a.calendar_navigation_small            { color: #0000aa; text-decoration: none; }
a.calendar_navigation_small:hover        { color: #000080; text-decoration: underline; }

.calendar_day_small                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #222222; }
a.calendar_day_small                    { color: #0000aa; text-decoration: none; }
a.calendar_day_small:hover            { color: #000080; text-decoration: underline; }

.calendar_date_number_small            { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 9px; color : #222222; }
a.calendar_date_number_small            { color: #0000aa; text-decoration: none; }
a.calendar_date_number_small:hover    { color: #000080; text-decoration: underline; }

//table.rounded td         { -moz-border-radius: 10px 10px 10px 10px; }
table.rounded5 td         { -moz-border-radius: 10px 10px 10px 10px; }
//table.notrounded td         { -moz-border-radius: 0px 0px 0px 0px; }
table.rounded5     {background:url(images/bg.jpg) no-repeat; height:300px;}
.dates_table     {background:url(images/box.jpg) no-repeat; height:45px; position:relative;}


.blank_day         {background:url(images/simple_box.jpg) no-repeat; height:45px}
//table.td.rounded5{background:url(images/box.jpg) no-repeat;}
.text                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 13px; color : #222222; }
a.text                    { color: #0000aa; text-decoration: none; }
a.text:hover            { color: #222222; text-decoration: underline; }

td.calendar_entry_full {background:url("no.png") no-repeat center; color:#222222; }
.dropdown_list             {list-style: none; float:left; padding:0px;}                            



td#drop {
    //font-size: 1.2em;

    //background: url(../images/box.jpg) no-repeat;
}
td#drop ul li a:hover{
    /*background: url(topnav_hover.gif) no-repeat center top;*/
}
td#drop span#drop { /*--Drop down trigger styles--*/
    width: 10px;
    height: 5px;
    float: left;
    background: url(jquery%20example/dropdown_linkbg.gif) no-repeat center top;
}
td#drop span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
td#drop ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    background: #FFF;
    margin: -5px 0px 0px -4px; padding: 0;
    display: none;
    float: left;
    width: 107px;
    border: 2px groove #CAD7F9;
    border-radius:0px 0px 10px 10px;

}
td#drop ul.subnav li{
    margin: 0; padding: 0;
    //border-top: 1px solid #252525; /*--Create bevel effect--*/
    //border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    border:1px solid #CAD7F9;
    border-bottom:none;
}
html td#drop ul.subnav li a {
    float: left;
    color:#000;
    text-decoration:none;
    background:center #FFF;
    padding-left: 30px;

}
html td#drop ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background:center #FFF;
    display:block;
    }

</style>

Answer 1

您可以在没有jQuery的情况下执行此操作，只需使用CSS即可。我正在使用背景颜色，但图像会产生相同的效果。

演示：http://jsfiddle.net/wdm954/strb2/

<table id="main">
    <tr>
        <td>
            <ul>
                <li>This is a list.</li>
                <li>This list has stuff.</li>
                <li>Look at this list.</li>
                <li>This list is sweet.</li>
            </ul>
        </td>
    </tr>
</table>

... CSS

#main {
    background-color: #ccc;    
}
#main ul {
    visibility: hidden;
    padding: 15px;
}
#main:hover ul {
    visibility: visible;
}

这是我能在不看你的代码的情况下做到的最好的事情。另一个选项，如果你想强制一个元素（如列表）出现在另一个元素之上，就是尝试将这个CSS添加到你的元素中......

#yourlist {
    position: relative;
    z-index: 10; /* you can set this higher if needed */
}

如何在表格中重叠背景图像

1 个答案: