ovrreride錨風格在.ui狀態懸停a從jqueryui css

我正在使用jquery UI css爲我的表，使用jquery函數應用樣式。對於在所有TD標籤上的鼠標每一行獲得一個CSS類UI狀態懸停這個類定義顏色錨ovrreride錨風格在.ui狀態懸停a從jqueryui css

.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因爲它在全球範圍的。如何覆蓋.ui-state-hover顏色。 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>

來源

2014-09-29 user884424

你的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來後，包括它會覆蓋原有的CSS

來源

2014-09-29 17:28:57

謝謝你，它的工作。 – user884424 2014-09-29 17:38:10

也請回答:) – 2014-09-29 17:38:40

ovrreride錨風格在.ui狀態懸停a從jqueryui css

回答

相關問題