Question

我对它进行了大量搜索，并发现如何在悬停在一个div上时更改另一个div的内容，并了解如何更改其元素 - 如背景颜色，字体，字体颜色。

这是我迄今为止所能得到的

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css"/>
        <title>Fancy Fonts</title>
    </head>
    <body>
        <div class="test">
            Change me on hover!
        </div>
    </body>
</html>

CSS

div.test
{
    background-color: black;
    color: white;
}

div.test:hover
{
    background-color: grey;
}

但是这改变了整个div的背景颜色，我需要它改变，比如，只是它的上半部分，但没有JS或任何东西，只有 CSS。

Answer 1

您可以使用渐变来执行此操作。

JSFiddle

.test {
     height:100px;
     background:linear-gradient(black 50%,red 50%, red); 
}

.test:hover {
     background:linear-gradient(green 50%,red 50%, red);
 }

Answer 2

Fiddle<---

添加内部div如果需要，可以将这些颜色分开。您需要一个高度值才能实现此目的。

<强> CSS：

div.test{
    background-color: black;
    color: white;
    height: 20px;
}

div.bg:hover{
    background-color: grey;
}
div.bg {
    background-color: transparent;
    max-height: 50%;
}

<强> HTML：

<div class="test">
    <div class="bg">
    Change me on hover!
    </div>
</div>

如何将鼠标悬停在div上以改变其背景的一部分？

2 个答案: