How can I make a clickable image in Bulma change the pointer on mouseOver like <button does="">?

Question

Loving the Bulma flow. Just wanted to make my images more obvious that they can do things when clicked.

I can bind a style with vue.js such as

<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>

but the mouse pointer doesn't change to something that might help it seem more button like... wondering if there is an easy Bulma attribute I can add

thanks in advance!

Answer 1

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

不过，您可以轻松地为此创建一个类！要遵循布尔玛惯例，我们将其称为is-clickable，并使用CSS对其进行定义：

.is-clickable {
  cursor: pointer;
}

现在只需将类包含在<figure>元素中即可。

您可以在MDN上详细了解cursor规则。

Answer 2

布尔玛> = 0.9.1

使用布尔玛类is-clickable。

reference- commit

布尔玛<0.9.1

您将必须自己添加CSS，这是使用的代码bulma：

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