为什么我在浏览器中看不到悬停效果

Question

为什么我应用的悬停效果看不到？
将鼠标悬停在相应的元素上时，我看不到我应用的样式。
但是，是的，如果我在 codepen 中复制这组代码，它就会清晰可见并得到应用。但为什么在浏览器中我什么也看不到

在浏览器中将鼠标悬停在startButton 和learnMore-btn 上将不起作用。但是打开代码笔文件并在 startButton 和 learnMore-btn

上

html styling

<section class="mainpart">
<div class="main-part-container maxWidth padding-left-right">
  <div class="main-partOne">
    <h1>Play Game Everytime Always Be Winner And Strong</h1>
    <p>Improve your gaming skills by playing games that are currently popular so that you don't go out of style improve skills</p>

    <div class="button-section">
      
      <button type="button" class="startButton">
        Get Started
      </button>
      <button type="button" class="learnMore-btn">
        Learn More
      </button>
    </div>
  </div>
  <div class="main-partTwo">
    <img src="./Assets/Icons/playButton.svg" alt="">
    <h1>The king of terania
      And Last Seasion
      XXIV</h1>
  </div>
</div>

css file styling

.button-section .startButton {
  background-color: var(--bg-orange);
  border: none;
  color: var(--font-color-white);
}

.button-section .learnMore-btn {
  background-color: transparent;
  border: 1px solid var(--bg-white);
  color: var(--font-color-white);
}

.button-section .startButton:hover {
  background-color: transparent;
  border: 2px solid var(--bg-orange);
  color: var(--bg-orange);
}
.button-section .learnMore-btn:hover {
  background-color: var(--bg-orange);
  border: 2px solid var(--bg-orange);
  color: var(--font-color-white);
}

只要看看我的代码笔文件它的工作

https://codepen.io/DeepakKumarDKN/pen/GRYrQjx

Answer 1

我试过你的代码，它有效。因此问题可能是浏览器缓存问题。尝试清除浏览器缓存并刷新页面以查看是否可以解决问题。