如何在 Bulma 中制作可点击的图像，像 <button does> 一样更改 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>

但是鼠标指针没有改变，这可能有助于它看起来更像按钮...想知道是否有一个简单的 Bulma 属性我可以添加

提前致谢！

Answer 1

对于 Bulma v0.9.1 和更新版本

如@Relisora 所述，class is-clickable 现在 ships natively 与布尔玛一起使用，因此不需要额外的 CSS。

---

旧版本

Bulma 目前没有内置 class，很遗憾。

但是，您可以轻松地为此创建 class！为了遵循 Bulma 约定，我们将其命名为 is-clickable，并使用 CSS:

来定义它

.is-clickable {
  cursor: pointer;
}

现在只需在 <figure> 元素中包含 class。

您可以在 MDN 上阅读有关 cursor 规则的更多信息。

Answer 2

布尔玛 >= 0.9.1

使用布尔玛 class is-clickable.

reference - commit

布尔玛 < 0.9.1

您必须自己添加 CSS，这里是布尔玛使用的代码：

.is-clickable {
  cursor: pointer !important;
}