javascript 如何使一个悬停像一个在windows 10设置？

omvjsjqw 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(107)

有人能告诉我如何做这样的悬停，但在css。
这是windows 10设置的一个例子。但是我想在css中复制它。

JavaScript

来源：https://stackoverflow.com/questions/76498224/how-to-make-a-hover-like-the-one-in-windows-10-settings

1条答案

按热度按时间

xe55xuns1#

你可以使用多个渐变背景图像来获得悬停时的那种效果。
举个例子。很明显，在你得到你想要的外观之前，你要不断地调整设置。

<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>

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 如何使一个悬停像一个在windows 10设置？

1条答案

相关问题

热门标签

最新问答