0

我有一种我喜欢的风格，并且像往常一样在 Firefox 18 中看起来不错，但在 IE 9 的版本上（我知道它不是完全最新的）它看起来很糟糕（并且损坏了）。

所以我决定放弃这种风格并尝试找到一个在线工作的例子。但是我发现不可能找到类似的东西，更不用说与 IE 兼容了！

这里有没有人知道如何修复我的示例并可能使其更加向后兼容或者是否有人知道我可以从中获得一些指示的这种风格的任何示例？

HTML

<div class="DateStyle"><span class="DateStyle_Date">21/01/2013</span><span class="DateStyle_Cross">x</span></div>

<div class="DateStyle"><span class="DateStyle_Date">11/02/2012</span><span class="DateStyle_Cross">x</span></div>

<div class="DateStyle"><span class="DateStyle_Date">08/05/2012</span><span class="DateStyle_Cross">x</span></div>

CSS

.DateStyle {
    display: inline-block;
    background-color: #4A4F54;
    color: #A4A7AA;
    font-weight: bolder;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 2px 6px 2px 8px;
    line-height: 1.2em;
}
.DateStyle_Date {
    padding-right: 5px;
    border-right: #A4A7AA dashed 1px;
}
.DateStyle_Cross{
    padding-left: 4px;
    height: 15px;
}

.DateStyle:hover {
    background-color: #5C6165;
}

jQuery

$(document).ready(function() {
    $('.DateStyle_Cross').hover(function(){
        $(this).parent().css('background','#751919 ');
    }, function(){
        $(this).parent().css('background','#4A4F54');
    })
    $('.DateStyle').hover.css( 'cursor', 'crosshair' );
    $('.DateStyle_Cross').hover.css( 'cursor', 'crosshair' );
});

http://jsfiddle.net/pUb6q/

谢谢

4

0 回答 0