0

我已经搜索了很多关于它的内容，发现如何在将鼠标悬停在一个 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。

4

2 回答 2

2

你可以用渐变来做到这一点。

JSFiddle

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

.test:hover {
     background:linear-gradient(green 50%,red 50%, red);
 }
于 2013-10-19T17:59:10.017 回答
1

小提琴<---

如果需要，添加一个内部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>
于 2013-10-19T18:03:37.613 回答