悬停时DIV背景颜色变化

Posted 2023-03-06

【中文标题】悬停时DIV背景颜色变化

【英文标题】：DIV background color change when Hover

【发布时间】：2018-08-28 18:15:31

【问题描述】：

我在这里查看了一些帖子，但没有成功让我的 div 在鼠标悬停时更改背景颜色。有点乱，但请耐心等待。这是html/php代码：

<a class="hoverTwo" href="https:/doltesting.000webhostapp.com/pageTwo.php">
  <div class="hoverTwo" class="secondSection">
    <p class="hoverTwo" style="background: lightblue;
           border: solid;
           text-align: center;
           font-family: Comic Sans MS, Comic Sans, cursive;">
      <br><br><br>
     <?php=
       echo "Section Two - Unknown";
      ?>
      <br><br><br><br><br>
    </p>
  </div>
</a>

这是 CSS：

a.hoverTwo a:hover a:visited a:link 
background: yellow;
color: black; 

【问题讨论】：

您的选择器完全错误。你知道选择器是如何工作的吗？

我的 CSS 有点不稳定，但我对它的工作原理有一个基本的了解。

【参考方案1】：

试试这个让你开始，并记住内联样式会覆盖 css：

<a href="https:/doltesting.000webhostapp.com/pageTwo.php">
    <div class="secondSection">
        <p class="hoverTwo">
            <br><br><br>
            SOME TEXT
            <br><br><br>
        </p>
    </div>
</a>

在你的 css 中有这个：

.hoverTwo  background-color:lightblue;color:green; 
.hoverTwo:hover background-color:yellow;color:black; 

【参考方案2】：

将此添加到您的 css 中

.hoverTwo:hover 
     background-color: blue;

您现有的 css 中也存在一些错误。注意我添加的逗号。也不是您的 a:hover 将设置为与 a 本身相同的颜色。所以悬停时不会有颜色变化。

a.hoverTwo, a:hover, a:visited, a:link 
    background: yellow;
    color: black;

【参考方案3】：

感谢您的帮助。这是有效的：

<div id="sectionTwoPage">

还有css：

#sectionTwoPage:hover 
background-color: silver;