英文:
Implementation of pomofocus button
问题
如何实现点击后更改这些 div 类？
我尝试添加边框线，但对我不起作用。
`border-width: 0 0 10px 0;`
此代码不会更改 div 的大小。
应该是新的 div 还是“button” div 的过渡？
编辑：<br>
Vue 模板代码：
<br>
```html
<button role="link"
@click="handleClick" class="timerButton" :class="active ? ' active' : ' non-active'">START</button>
CSS：
```css
.active { border-width: 0 0 10px 0; }
```
英文:
how can I implement this div classes that change on-click?
I tried to add border line but it doesn't work to me.
border-width: 0 0 10px 0;
This code doesn't change size of div.
Should it be new div or transition of the "button" div?
edit:<br>
vue template code:
<br>
<button role="link"
@click="handleClick" class="timerButton" :class="active ? ' active' : ' non-active'" >START</button>
<br>css:<br>.active { border-width: 0 0 10px 0; }
答案1
得分: 0
我会使用.classList.toggle('start')来切换div，然后应用相同高度的padding-bottom和border...
.active {
padding-bottom: 20px;
border-bottom: 20px solid gray;
}
我猜你已经弄清楚如何更改文字了？请包括您的代码，这样我们可以更好地帮助您。希望这对您有用！
英文:
I would transition the div using .classList.toggle('start') and then apply padding-bottom and border of the same height...
.active {
padding-bottom: 20px;
border-bottom: 20px solid gray;
}
I'm guessing you already figured out how to change the words? Please include your code so we can help you better. I hope this works for you!
答案2
得分: 0
这个 CSS 代码实际上是在完成他的工作
这是一个解决方案:
.active {
transform: translateY(6px);
}
.non-active {
box-shadow: rgb(235, 235, 235) 0px 6px 0px;
}
英文:
this css code actually makes his job
it is a solution:
.active {
transform: translateY(6px);
}
.non-active {
box-shadow: rgb(235, 235, 235) 0px 6px 0px;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论