Question

我正在为我的表使用Jquery UI css，使用Jquery函数应用样式。对于鼠标上的每一行，所有td标签都会获得一个css类 ui-state-hover ，并且此类定义了锚点的颜色

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #212121;
    text-decoration: none;
}

我不希望颜色＃212121 为我的桌子上的锚点，并保留默认蓝色来自我的CSS

a,
    a:link,
    a:active {
        text-decoration: none;
        color: blue ;
        background-color: transparent;
    }
    a:visited {
        color: purple ;
        background-color: transparent;
    }
    a:hover {
        text-decoration: underline;
    }

我不想在我的css中添加！important 来锚定颜色样式，因为它在全局范围内执行。建议我如何覆盖 .ui-state-hover a color 。 Plunker link

我的hmtl代码

<html>
<head>
    <!--<script  type="text/javascript"  src="../jquery-ui-1.11.1/external/jquery/jquery.js"/>
    <link type="text/css"  src="../jquery-ui-1.11.1/jqueryui.css">
    <script  type="text/javascript"  src="../jquery-ui-1.11.1/jqueryui.js"/>
        -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


    <style>
    body {
    font-family: 'Arial';
    font-size: 12px;
}
a,
    a:link,
    a:active {
        text-decoration: none;
        color: blue ;
        background-color: transparent;
    }
    a:visited {
        color: purple ;
        background-color: transparent;
    }
    a:hover {
        text-decoration: underline;
    }

    a.ui-state-hover{
        color: blue !important;
    }
</style>
<script>
    $(document).ready(function(){
        tblCss();
    });
    var tblCss =function(){
        $("table").each(function(){
            jqueryUITbl(this);
        });
    }

    var jqueryUITbl  =function(tbl){
         $this = $(tbl);
         $this.on('mouseover mouseout', 'tbody tr', function (event) {
              console.log('  mouseover')
             $(this).children('td').toggleClass("ui-state-hover", event.type == 'mouseover');
         });
         $this.find("caption").addClass("ui-widget-header ui-corner-all");
         $this.find("th").addClass("ui-widget-header  ui-corner-all");
         $this.find("td").addClass("ui-widget-content");
    }

</script>
</head>
<body>


<br/>
    <table>
        <tr>
            <th> Clumns1</th>
            <th> Column2</th>
        </tr>
        <tr>
            <td>
                Some text
            </td>
            <td>
                <a href=""> Test link </a>
            </td>
        </tr>
        <tr>
            <td>
                Some text
            </td>
            <td>
                <a href=""> Test link </a>
            </td>
        </tr>
        <tr>
            <td>
                Some text
            </td>
            <td>
                <a href=""> Test link </a>
            </td>
        </tr>


    </table>


</body>


</html>

Answer 1

将您的CSS更改为

a,
    a:link,
    a:active,  .ui-state-hover a {
        text-decoration: none;
        color: blue ;
        background-color: transparent;
    }
    a:visited, .ui-state-hover a:visited {
        color: purple ;
        background-color: transparent;
    }
    a:hover,  .ui-state-hover a:hover {
        text-decoration: underline;
    }

由于你的css位于include之后，它将覆盖之前的css

在.ui-state-hover中的ovrreride锚样式来自jqueryui css

1 个答案: