我需要在樣式引數之后洗掉/停用/更改為零效果：
#wrapper .fragment-card.aktuelles-card .image-card img:hover{
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
這必須發生在非常基本的 Javascript 中，所以我不能使用 libarys 等。JS 部分將在頁面末尾執行。
謝謝你的幫助！
uj5u.com熱心網友回復：
您不能使用 javascript 直接停用 CSS 規則。所以你有兩個選擇：
1）第一個選項僅使用 javascript 來執行此操作。您可以使用方法修改元素的樣式setAttribute()屬性以設定transform: none; box-shadow: none;. 像這樣：
const el = document.querySelector("#myElementId");
el.setAttribute("style", "transform: none; box-shadow: none;");
但是，我不喜歡在使用 css 規則時使用 style 屬性，因為我更喜歡在同一個 css 檔案中查看所有樣式，并且維護代碼更加困難，因此我不建議使用此解決方案。
2)良好的實踐解決方案涉及 CSS 和 JS。您必須將您的 css 規則參考到 class .my-style。那么你寫你的css規則是這樣的：
.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
因此，現在您需要在需要時使用 Javascript 來添加或洗掉.my-style類。在您在原始 css 中使用的參考的情況下img:hover，您可以制作自己的 js 函式以在img懸停時添加類，并在指標離開時洗掉類img。此事件偵聽器將很有用：
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});
在這里試試
顯示代碼片段
document.querySelectorAll("img").forEach(img => {
img.addEventListener("mouseover", function() {
img.classList.add("my-style");
})
img.addEventListener("mouseleave", function() {
img.classList.remove("my-style");
})
});.my-style {
transform:scale(3);
box-shadow:0 4px 6px 0 #222;
}
img {
width: 200px;
height: auto;
}<img src="https://s1.eestatic.com/2021/05/06/curiosidades/mascotas/579203536_184266041_1706x960.jpg">
<img src="https://ichef.bbci.co.uk/news/640/cpsprodpb/15665/production/_107435678_perro1.jpg">
<img src="https://dam.ngenespanol.com/wp-content/uploads/2019/06/mirada-perros-770x395.png">uj5u.com熱心網友回復：
如果您確定在頭部設定了違規樣式，則可以創建另一個樣式表并將其添加到頭部元素的末尾。如果沒有，你可以把它放在身體的末端。
此代碼段將其添加到頭部的末尾：
<!doctype html>
<html>
<head>
<style>
#wrapper .fragment-card.aktuelles-card .image-card img:hover {
transform: scale(3);
box-shadow: 0 4px 6px 0 #222;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="fragment-card aktuelles-card">
<div class="image-card">
<img src="https://picsum.photos/id/1015/200/300">
</div>
</div>
</div>
<script>
const style = document.createElement('style');
style.innerHTML = '#wrapper .fragment-card.aktuelles-card .image-card img:hover{transform: inherit!important;box-shadow: inherit!important};';
const head = document.querySelector('head');
head.appendChild(style);
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416917.html
標籤：
上一篇：在flex結構中添加分組標簽