如何在 Bulma 中制作可点击的图像，像 <button do> 一样更改 mouseOver 上的指针？

Question

喜欢布尔玛的流动。只是想让我的图像更明显，它们可以在单击时执行操作。

我可以用 vue.js 绑定一个样式，比如

<figure class="image is-128x128">
<img v-bind:src="currentTrack.coverURL"   
@mouseover="hover = true" 
@mouseleave="hover = false"
@click="playAudio()" 
:style="hover ? {opacity:0.5} : {opacity:1}" alt=""/>
</figure>

但是鼠标指针并没有变成可能有助于它看起来更像按钮的东西......想知道是否有一个简单的布尔玛属性我可以添加

提前致谢！

Answer 1

对于布尔玛 v0.9.1 及更新版本

正如@Relisora 所指出的，该类is-clickable现在与 Bulma 一起本地发布，因此不需要额外的 CSS。

旧版本

不幸的是，布尔玛目前没有内置的类。

但是，您可以轻松地为此创建一个类！为了遵循 Bulma 约定，让我们称之为is-clickable，并使用 CSS 定义它：

.is-clickable {
  cursor: pointer;
}

现在只需将类包含在<figure>-element 中。

你可以cursor在MDN上阅读更多关于-rule 的信息。