Question

我已经在这里查看了一些帖子，但是当鼠标悬停时我没有成功使我的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; }

Answer 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; }

Answer 2

将此添加到您的css

.hoverTwo:hover {
     background-color: blue;
}

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

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

Answer 3

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

<div id="sectionTwoPage">

和css：

#sectionTwoPage:hover {
background-color: silver;
}

悬停时DIV背景颜色会发生变化

3 个答案: