如何覆蓋特定元素的CSS轉換？

我想知道是否有快速/智能的方式來覆蓋HTML文檔中特定元素的CSS轉換？如何覆蓋特定元素的CSS轉換？

如果我們有這個CSS定義的設置，這將適用於過渡到所有元素：

* { 
    transition: all 0.35s ease-in-out; 
}

我怎麼會覆蓋文本元素的CSS過渡效果，使所有文字將不會申請過渡到它？請注意，這涵蓋了所有元素，如p，h1，h2，h3，h4，h5，h6等，以及包含文本的元素，例如我是一些奇特的文本。

下面的代碼片段是一個不應該發生的例子。背景顏色變化過渡是預期會發生的事情，但文本不應該過渡。

* { 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.egodiv { 
 
    font-size: 12px; 
 
    color: black; 
 
    background-color: white; 
 
} 
 

 
.egodiv:hover { 
 
    font-size: 20px; 
 
    color: white; 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <div class="egodiv">Look at me now!</div> 
 
    </body> 
 
</html>

來源

2015-09-17 EthiopionZA

坦率地說，「過渡：所有」都是凌亂的。當您不需要時，您會花費更多的時間關閉它，而不是將其定義在您想要的元素上。另外，我想你可能會遇到一些性能和佈局問題。 –

試試這個：

* { 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.egodiv { 
 
    font-size: 12px; 
 
    color: black; 
 
    background-color: white; 
 
    transition:none; // override transition 
 
} 
 

 
.egodiv:hover { 
 
    font-size: 20px; 
 
    color: white; 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
    <div class="egodiv">Look at me now!</div> 
 
    </body> 
 
</html>

來源

2015-09-17 15:20:13 YvesHendseth

，因爲他想覆蓋它，所以最好使用'transition：none！important;' – Alaeddine

@Alaeddine不，它不是。在完全不必要的地方使用'！important'正是你不應該暗示的。 – George

只有這樣，才能關閉轉換爲特定的風格，就是完全重新定義的過渡性質。這隻要你知道原來的過渡值是罰款：

* { 
 
    transition: all 0.35s ease-in-out; 
 
} 
 

 
.egodiv { 
 
    font-size: 12px; 
 
    color: black; 
 
    background-color: white; 
 
    transition: all 0.35s ease-in-out, font-size .01s linear; 
 
} 
 

 
.egodiv:hover { 
 
    font-size: 20px; 
 
    color: white; 
 
    background-color: red; 
 
}

<div class="egodiv">Look at me now!</div>

我以爲這是font-size你想禁用過渡上。

來源

2015-09-17 15:26:23 George

如何覆蓋特定元素的CSS轉換？

回答

相關問題