主页 / 问题 / 1589835
Accepted
Dmitrii
Asked:2024-08-07 18:56:36 +0000 UTC2024-08-07 18:56:36 +0000 UTC

:hover 表示鼠标悬停， :active 表示触摸

  • 772

在Css中，可以拆分，对于我们使用悬停的光标，当触摸时，光标处于活动状态？

html

1 个回答

  1. Best Answer

    for :hover -@media (hover: hover) and (pointer: fine)将用于鼠标

    for :active -@media (hover: none) and (pointer: coarse)将手指悬停在触摸屏上时应用

    pointer: fine用于高精度指针，例如鼠标

    pointer: coarse指向低精度指针，例如手指

    .my-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}


/* Стили для устройств с указателем мыши */

@media (hover: hover) and (pointer: fine) {
  .my-button:hover {
    background-color: red;
  }
}


/* Стили для сенсорных устройств */

@media (hover: none) and (pointer: coarse) {
  .my-button:active {
    background-color: yellow;
  }
}
    <button class="my-button">для курсора применяем hover(красный), а при касании active(желтый)</button>

    • 3

相关问题