Wie erstelle ich die Hover-Funktionalität wie in den Windows 10-Einstellungen?
Kann mir jemand sagen, wie man so einen Hover in CSS macht?
Dies ist ein Beispiel für ein Windows 10-Setup. Aber ich möchte es in CSS replizieren.
Heim > Fragen und Antworten > Hauptteil
Kann mir jemand sagen, wie man so einen Hover in CSS macht?
Dies ist ein Beispiel für ein Windows 10-Setup. Aber ich möchte es in CSS replizieren.
P粉5150665182023-09-13 00:20:32
您可以使用多个渐变背景图像来获得悬停时的效果。
这是一个例子。显然，请尝试各种设置，直到获得您想要的外观为止。
<style>
body {
background: black;
}
div {
width: 150px;
height: 50px;
color: red;
}
div:hover {
background-image: linear-gradient(to right, white, transparent), linear-gradient(white, transparent), linear-gradient(to right, rgba(255, 255, 255, 0.3), 20%, transparent);
background-size: 100% 1px, 1px 100%, 100% 100%;
background-position: top left, top left, 1px 1px;
background-repeat: no-repeat;
}
</style>
<body>
<div>Hover here</div>
</body>