0

私はそれについて多くのことを検索し、1 つの 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 に答える