欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

Javascript DOM樣式禁用css懸停效果

CSS
錢瀠龍2年前9瀏覽0評論

我是javascript初學者，我創建了一個簡單的項目來理解DOM 風格但是面臨一個問題。有一個紅色背景和藍色的p標簽 顏色懸停效果。我在p上放了一個onclick事件，當用戶點擊p時， 其背景顏色變為橙色。問題是當背景顏色 隨著onclick事件的變化，懸停效果將不再有用。 那么有沒有問題或者這是javascript的常規行為？

<html>

<head>
  <style>
    #p2 {
      background-color: red;
    }
    
    #p2:hover {
      background-color: blue;
    }
  </style>
</head>

<body>
  <p id="p2" onclick="test()"> text </p>
  <script>
    function test() {
      document.getElementById("p2").style.backgroundColor = "orange";
    }
  </script>
</body>

</html>

這里的問題是由于內聯樣式具有最高的特異性。有許多解決方案，使用！“重要”通常是一個糟糕的解決方法，因為隨著項目變得越來越大以及其他各種原因，它很難工作。

作為初學者，現在是養成良好習慣的時候了。所以對于我的回答，我去掉了你的內聯onclick和內聯樣式改變。

我使用一個事件監聽器和querySelector來定位你的段落。

然后，我將向該元素添加一個類(您也可以在單擊時使用toggle來添加/刪除)。

對于CSS，我通過#p2.orange定位元素(orange是我的類名)。我把它放在CSS本身的懸停上面。

const p = document.querySelector("#p2");

p.addEventListener("click",() => {
  p.classList.add("orange");
});

#p2 {
  background-color: red;
}

#p2.orange{
  background-color:orange;
}

#p2:hover {
  background-color: blue;
}

<p id="p2"> text </p>

我的建議是定義具有相同優先級的類，以防止使用！重要；(這可能會產生其他問題)

<html>

<head>
  <style>
    #p2.red {
      background-color: red;
    }

    #p2.orange {
      background-color: orange;
    }
    
    #p2:hover {
      background-color: blue;
    }
  </style>
</head>

<body>
  <p id="p2" class="red" onclick="test()"> text </p>
  <script>
    function test() {
      document.getElementById("p2").classList.toggle("orange");
    }
  </script>
</body>

</html>

這是JavaScript的常規行為。

當您使用JavaScript更改元素的背景色時，比如:document . getelementbyid(& quot；p2 & quot)style.backgroundColor = & quot橙色& quot 它直接修改該元素的內聯樣式，該樣式優先于CSS中定義的任何樣式，包括懸停效果。

這里有一個CSS特異性層次的列表。

因為內聯樣式具有更高的特異性，它將覆蓋您的css屬性。你可以通過添加來抵消這一點！對你的懸停風格很重要:

<html>

<head>
  <style>
    #p2 {
      background-color: red;
    }
    
    #p2:hover {
      background-color: blue !important;
    }
  </style>
</head>

<body>
  <p id="p2" onclick="test()"> text </p>
  <script>
    function test() {
      document.getElementById("p2").style.backgroundColor = "orange";
    }
  </script>
</body>

</html>

你可以使用CSS變量來改變:懸停顏色。

:root{--clr:#0000ff;}

設置初始顏色，

background-color: var(--clr);

將變量分配給背景色樣式。

document.querySelector(':root').style.setProperty('--clr','orange');

然后從JavaScript更改變量。

<html>

<head>
  <style>

    :root{
      --clr:#0000ff;
    }

    #p2 {
      background-color: red;
    }
    
    #p2:hover {
      background-color: var(--clr);
    }
  </style>
</head>

<body>
  <p id="p2" onclick="test()"> text </p>
  <script>
    function test() {
     document.querySelector(':root').style.setProperty('--clr','orange');
    }
  </script>
</body>

</html>