html - 如何处理滑动门和非事件按钮

Question

我有这样的解决方案:http://jsfiddle.net/snowman/sns2J/

正如您在示例中看到的，我必须包括以下内容:

.paging .inactive a:hover
{
    background-position:    100% -26px;
    border-width:            0px;
    cursor:                 default;
}
.paging .inactive a:hover span
{
    background-position:    0 -26px;
    color:                    #d9d9d9;
    cursor:                 default;
}

禁用悬停效果。

有没有更好的办法？

Answer 1

使用attribute selectors区分 anchor <a>其中有 href属性和那些不:

.paging a
{
    background: transparent url('http://imgur.com/bExgs.png') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 26px;
    margin-right: 6px;
    padding-right: 13px; /* sliding doors padding */
    text-decoration: none;
}
.paging a span
{
    background: transparent url('http://i.stack.imgur.com/C4JSY.png') no-repeat;
    display: block;
    line-height: 14px;
    padding: 6px 0 6px 13px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.paging a span {float:none;}
/* End IE5-Mac hack */
.paging a[href]:hover span{
    color:            black;
}
.paging .current a
{
    background-position:    100% -52px;
    border-width:            0px;
}
.paging .current a span
{
    background-position:    0 -52px;
    color:                    black;
}
.paging .inactive a
{
    background-position:    100% -26px;
    border-width:            0px;
}
.paging
{
    list-style:     none;
    margin:         0px;
    padding:        0px;
    color:          #444444;
    font:           12px arial,sans-serif;
}

.paging li
{
    margin-left:    0px;
    float:          left;
}

.paging .inactive a span
{
    background-position:    0 -26px;
    color:                    #d9d9d9;
}

.paging .inactive a[href]:hover
{
    background-position:    100% -26px;
    border-width:            0px;
    cursor:                 default;
}
/*
.paging .inactive a:hover span
{
    background-position:    0 -26px;
    color:                    #d9d9d9;
    cursor:                 default;
}
*/
.paging a[href]:hover
{
    background-position:        100% -52px;
    color:                    black;
}
.paging a[href]:hover span{
      background-position:        0 -52px;
}