html - 在 CSS 中更改悬停 div 的背景

Question

我有一些 div，当您悬停它们时我想更改背景。

起初我的背景是隐藏的，当你悬停时应该会发生这样的事情，背景中有一个文本，如下所示:

到目前为止，这是我可以做的，但我在使用 css 或 html 结构时遇到了问题:

.first-background {
    height: 100vh;
    width: 100vw;
    background-color: black;
    visibility: hidden;
    opacity: 0;
    position: absolute;
}

h1 {
    font-size: 10em;
    color: white;
}

.first {
    height: 20px;
    width: 20px;
    background-color: blue;
}

.first:hover .first-background {
    visibility: visible;
    opacity: 1;
}

<div class="first-background">
        <h1>FIRST</h1>
    </div>


    <div class="container">
        <div class="col-md-12">
            <div class="section col-md-4 col-xs-12">
                <div class="first">
                    <div class="content">
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

要执行类似的操作，您需要在 html 标记中使用 onmouseover。我做了一个简单的例子来尝试向您展示如何去做。

function changebg(){
  document.getElementById("cont").style.background = "url('https://image.freepik.com/free-vector/purple-background-of-colorful-triangles_23-2147616335.jpg')";
}

function resetbg(){
  document.getElementById("cont").style.background = "";
}

.container {
  width: 200px;
  height: 200px;
}

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
}

<div class="container" id="cont">
  <div class="square" onmouseover="changebg()" onmouseout="resetbg()">
  </div>
</div>