如何阻止jquery重寫CSS顏色？

我有一個顯示名稱，等級和點的表格。當我將鼠標懸停在行上時，行會改變顏色，當我點擊每個行時，它會添加'active'類。我的CSS規則選擇'active'類來給它一個邊框和新的背景顏色。邊框起作用，但背景顏色沒有。如何阻止jquery重寫CSS顏色？

我知道jquery的工作原理，因爲當我點擊該行時，它會添加一個黑色邊框，因爲它應該根據我設置的CSS規則進行，但背景只是變成白色。我也檢查了螢火蟲，它顯示活動類被添加到點擊行，但顏色仍然沒有改變。我現在不擔心切換點擊，因爲我只想清除第一步。

我搜索了一些其他的舊帖子，推薦添加！重要的，但這也不起作用。

的Html

<tr class="row-data"> 
    <td class="name">player</td> 
    <td class="points">points</td> 
    <td class="rank"><p id="rank">Rank1</p></td> 
    </tr>

CSS

.row-data .active { 
    border: 2px solid black; 
    background-color: red !important;

}

jQuery的

$(function() { 
var limegreen = '#73f302'; 
var white2 = '#eef4cc'; 
var transitionTime = '0.5s' 

var $rankTable = $('.rank-table'); 
var $rowData = $rankTable.find('.row-data'); 

function rowHighlight() { 
    var rowID = $(this) 

    rowID.css({ 
    'background-color': limegreen, 
    'transition-property': 'background-color', 
    'transition-duration': transitionTime, 
    }); 
}; 
function rowDelight() { 
    var rowID = $(this) 
    rowID.css({ 
    'background-color': white2, 
    'transition-property': 'background-color', 
    'transition-duration': transitionTime, 
    }); 
}; 

function activeToggle() { 
    var activeID = $(this) 

    activeID.addClass('active') 
}; 

$rowData.on('mouseover', rowHighlight); 
$rowData.on('mouseleave', rowDelight); 
$rowData.on('click', activeToggle); 


});

來源

2015-10-22 Kyle Truong

的問題是，你嘗試目標'''.row數據.active' ''當你的代碼我猜你應該是定位'''.rank-table .active'''或'''.row-data.active''' – arma

首先，你.active類不工作，因爲你已經添加了組合子的（空間）到選擇器。 .row-data .active的意思是「找到.row-data以內的所有.active類別的孩子」。你想.row-data.active與.active類找到.row-data。

至於其他方面，Javascript樣式應用內聯，這意味着它們會覆蓋樣式標記或外部樣式表中定義的任何樣式 - 除非您在這些規則上使用!important。閱讀：CSS Specificity。

話雖如此，你想要做的是正好什麼樣的CSS類。在CSS中創建你的樣式，並用javascript切換這些類。你不應該用Javascript設置樣式，特別是如果你不得不在樣式表中使用!important！總有一種方法可以用CSS來完成。

CSS：

.row-data { 
    transition: background-color .5s; 
} 

.row-data.active { 
    border: 2px solid black; 
    background-color: red; 
} 

.row-data.highlight { 
    background-color: #73f302; 
}

JS：

$(function() { 
    var $rankTable = $('.rank-table'); 
    var $rowData = $rankTable.find('.row-data'); 

    $rowData.on('mouseenter', function() { 
    $(this).addClass('highlight'); 
    }); 

    $rowData.on('mouseleave', function() { 
    $(this).removeClass('highlight'); 
    }); 

    $rowData.on('click', function() { 
    $(this).toggleClass('active'); 
    }); 
});

來源

2015-10-22 01:07:53

@ KnT88真棒，真的很高興它有幫助！布拉德的答案甚至更好;甚至不需要使用Javascript來綁定'mouseenter' /'mouseleave'事件（除非你在代碼中做其他事情）。你可以使用CSS'：hover'。 –

你的問題是，你正在使用.css設置在諒解備忘錄的風格eover和mouseleave。這導致css在style=""屬性的html中內聯。

內聯樣式具有最高的重要性，因此無論您將類設置爲什麼，它都不起作用。

你應該做相反的是移動你的CSS爲mouseover和mouseleave成類，設置類，而不是使用.css

來源

2015-10-22 01:07:27 nbermudezs

首先，CSS設置您的懸停狀態。對於您正在尋找的活動狀態，只需切換課程即可。

fiddle

HTML

<body> 
    <table> 
    <tr class="row-data"> 
     <td class="name">bob</td> 
     <td class="points">12 points</td> 
     <td class="rank"> 
     <p>Rank1</p> 
     </td> 
    </tr> 
    <tr class='row-data'> 
     <td class="name">bill</td> 
     <td class="points">6 points</td> 
     <td class="rank"> 
     <p>Rank2</p> 
     </td> 
    </tr> 
    </table> 
</body>

CSS

table{ 
    border-collapse: collapse; 
} 

.row-data:hover{ 
    background-color: lightgray; 
} 

.row-data.active{ 
    border: 2px solid black; 
    background-color: red; 
}

jQuery的

$(function() { 
    $('.row-data').on('click', function() { 
     $(this).toggleClass('active'); 
    }); 
})

來源

2015-10-22 01:28:53

現在我覺得很傻，當然，甚至不需要使用Javascript來切換'highlight'類。 +1。 –

是的，但你花時間解釋這一切，所以這就是:) –

爲什麼我的回答下來投票？這是正確的答案，這是最好的答案....我甚至可以找出誰投了票嗎？這是多麼愚蠢的系統。 –

如何阻止jquery重寫CSS顏色？

回答

相關問題