元素悬停时可见，但单击时不可见

要实现元素在悬停时可见，但在单击时不可见的效果，可以使用CSS和JavaScript

创建HTML元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover and Click Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="element" class="element">我是一个元素</div>
    <script src="script.js"></script>
</body>
</html>

编写CSS样式：

/* styles.css */
.element {
  width: 200px;
  height: 200px;
  background-color: red;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s;
}

.element.hidden {
  opacity: 0;
}

编写JavaScript代码：

// script.js
const element = document.getElementById('element');

element.addEventListener('mouseover', () => {
  element.classList.remove('hidden');
});

element.addEventListener('mousedown', () => {
  element.classList.add('hidden');
});

element.addEventListener('mouseup', () => {
  element.classList.remove('hidden');
});

在这个示例中，我们创建了一个名为element的div元素。当鼠标悬停在该元素上时，我们使用mouseover事件移除hidden类，使其可见。当鼠标按下时，我们使用mousedown事件添加hidden类，使其不可见。当鼠标释放时，我们使用mouseup事件移除hidden类，使其再次可见。同时，我们还添加了一个CSS过渡效果，使元素的显示和隐藏更加平滑。