英文:
On "click" button trigger some CSS values instead of "hover" using Tailwind and React
问题
我想创建一种事件触发器，只有在我按住点击时才显示Tailwind值。如果我不停地按住按钮，它会看起来就像是实际按下了，即"shadow-inner"或其他一些Tailwind值。
我是否需要单独的事件监听器，或者是否有一些像"hover:"这样的Tailwind事件我不知道的？
英文:
I want to form some kind of event trigger that would display Tailwind values only during when my click is pressed. If I keep on pressing the button would appear as if it is physically pressed i.e. "shadow-inner" or some other tailwind value
Do I need a separate event listener or is there some tailwind event like "hover:" that I don't know of
答案1
得分: 0
这方面在Tailwind中没有事件，因为这是JavaScript。
您必须使用 mousedown 和 mouseup 来实现您想要的效果。
例如：
const button = document.querySelector('button');
button.addEventListener('mousedown', () => {
// 在这里添加逻辑
});
button.addEventListener('mouseup', () => {
// 在这里添加逻辑
});
英文:
There is no events in tailwind for this, since this is JavaScript.
You have to use mousedown and mouseup to achieve what you want.
For example :
const button = document.querySelector('button');
button.addEventListener('mousedown', () => {
// logic here
});
button.addEventListener('mouseup', () => {
// logic here
});
答案2
得分: 0
使用 active: 变体，它表示 :active 伪类。
> :active CSS 伪类表示用户正在激活的元素（例如按钮）。在使用鼠标时，“激活”通常从用户按下主要鼠标按钮开始。
<button type="button" class="bg-red-500 active:bg-blue-500">按钮</button>
当单击（按下）此按钮时，它将变为蓝色。
英文:
Use active: variant which represents :active pseudo-class.
> The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
<button type="button" class="bg-red-500 active:bg-blue-500">Button</button>
This button will be blue when clicked (pressed)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论